3.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78a8367417b2b2512ae7	Cambia la duración de las animaciones con palabras clave	0	https://scrimba.com/c/cJKvwCM	301045	change-animation-timing-with-keywords

--description--

En las animaciones CSS, la propiedad animation-timing-function controla qué tan rápido un elemento animado cambia sobre la duración total de la animación. Si la animación es un carro moviéndose de un punto A a un punto B en un tiempo establecido (tu animation-duration), la animation-timing-function dicta cómo el carro acelera y desacelera durante el transcurso en marcha.

Existe un número de palabras clave predefinidas disponibles para las opciones populares. Por ejemplo, el valor por defecto es ease, que empieza despacio, acelera en el medio y luego reduce la velocidad de nuevo al final. Otras opciones incluye ease-out, que es rápida al inicio y luego reduce la velocidad, ease-in, que es lenta al inicio y luego acelera al final, o linear, que aplica una velocidad constante a lo largo de la animación.

--instructions--

Para los elementos con id ball1 y ball2, agrega una propiedad animation-timing-function a cada uno y asigna linear a #ball1 y ease-out a #ball2. Nota la diferencia entre cómo los elementos se mueven durante la animación pero terminan juntos, dado que comparten la misma animation-duration de 2 segundos.

--hints--

El valor de la propiedad animation-timing-function para el elemento con el id ball1 debe ser linear.

const ball1Animation = __helpers.removeWhiteSpace(
  $('#ball1').css('animation-timing-function')
);
assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');

El valor de la propiedad animation-timing-function para el elemento con el id ball2 debe ser ease-out.

const ball2Animation = __helpers.removeWhiteSpace(
  $('#ball2').css('animation-timing-function')
);
assert(
  ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
);

--seed--

--seed-contents--

<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>

--solutions--

<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%;
    animation-timing-function: linear;
  }
  #ball2 {
    left:56%;
    animation-timing-function: ease-out;
  }

  @keyframes bounce {
    0% {
      top: 0px;
    }
    100% {
      top: 249px;
    }
  }
</style>
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>

3.2 KiB Raw Blame History