freeCodeCamp

3.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78a8367417b2b2512ae7	Change Animation Timing with Keywords	0		Alterar o tempo de animação com palavras-chave

Description

Em animações CSS, a propriedade animation-timing-function controla a rapidez com que um elemento animado é modificado ao longo da duração da animação. Se a animação for um carro passando do ponto A para o ponto B em um determinado momento (sua animation-duration ), a animation-timing-function diz como o carro acelera e desacelera ao longo do percurso da unidade. Há várias palavras-chave predefinidas disponíveis para opções populares. Por exemplo, o valor padrão é a ease , que começa devagar, acelera no meio e, em seguida, desacelera no final. Outras opções incluem a ease-out , que é rápida no começo, depois desacelera, ease-in , que é lenta no começo, depois acelera no final, ou linear , o que aplica uma velocidade de animação constante.

Instructions

Para os elementos com id de ball1 e ball2 , adicione uma propriedade de animation-timing-function a cada um e defina #ball1 como linear e #ball2 para ease-out . Observe a diferença entre como os elementos se movem durante a animação, mas terminam juntos, pois eles compartilham a mesma animation-duration de animation-duration de 2 segundos.

Tests

tests:
  - text: O valor da propriedade <code>animation-timing-function</code> para o elemento com o id <code>ball1</code> deve ser linear.
    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: O valor da propriedade <code>animation-timing-function</code> para o elemento com o id <code>ball2</code> deve ser facilitado.
    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.0 KiB Raw Blame History