freeCodeCamp

3.2 KiB

Raw Blame History

id	title	localeTitle	challengeType	videoUrl
587d78a8367417b2b2512ae7	Change Animation Timing with Keywords	Cambiar el tiempo de animación con palabras clave	0

Description

En las animaciones CSS, la propiedad animation-timing-function controla la rapidez con la que un elemento animado cambia a lo largo de la duración de la animación. Si la animación es un automóvil que se mueve del punto A al punto B en un tiempo determinado (la animation-duration su animation-duration ), la animation-timing-function la animation-timing-function dice cómo el automóvil acelera y desacelera en el transcurso del viaje. Hay una serie de palabras clave predefinidas disponibles para las opciones populares. Por ejemplo, el valor predeterminado es la ease , que comienza lento, se acelera en el medio y luego se ralentiza nuevamente al final. Otras opciones incluyen la ease-out , que es rápida al principio y luego se ralentiza, la ease-in , que es lenta al principio, luego se acelera al final, o linear , que aplica una velocidad de animación constante en todo momento.

Instructions

Para los elementos con el ID de ball1 y ball2 , añada una animation-timing-function propiedad para cada uno, y establecer #ball1 a linear , y #ball2 a ease-out . Observe la diferencia entre cómo se mueven los elementos durante la animación pero terminan juntos, ya que comparten la misma animation-duration de animation-duration de 2 segundos.

Tests

tests:
  - text: El valor de la propiedad de <code>animation-timing-function</code> para el elemento con el id <code>ball1</code> debe ser lineal.
    testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.");'
  - text: El valor de la propiedad de <code>animation-timing-function</code> para el elemento con el id <code>ball2</code> debe ser fácil de eliminar.
    testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.");'

Challenge Seed

<style>

  .balls {
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    position: fixed;
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #ball1 {
    left:27%;

  }
  #ball2 {
    left:56%;

  }

@keyframes bounce {
  0% {
    top: 0px;
  }
  100% {
    top: 249px;
  }
}

</style>

<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>

Solution

// solution required

3.2 KiB Raw Blame History