freeCodeCamp

2.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78a8367417b2b2512ae5	Animate Elements at Variable Rates	0		Elementos animados em taxas variáveis

Description

Há várias maneiras de alterar as taxas de animação de elementos animados de maneira semelhante. Até agora, isso foi alcançado aplicando uma propriedade de animation-iteration-count e definindo regras @keyframes . Para ilustrar, a animação à direita consiste em duas "estrelas", cada uma diminuindo de tamanho e opacidade na marca de 20% na regra @keyframes , que cria a animação de brilho. Você pode alterar a regra @keyframes de um dos elementos para que as estrelas brilhem em taxas diferentes.

Instructions

Altere a taxa de animação do elemento com o nome da classe de star-1 alterando sua regra @keyframes para 50%.

Tests

tests:
  - text: A regra <code>@keyframes</code> para a classe <code>star-1</code> deve ser de 50%.
    testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), "The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.");'

Challenge Seed

<style>
  .stars {
    background-color: white;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    animation-iteration-count: infinite;
  }

  .star-1 {
    margin-top: 15%;
    margin-left: 60%;
    animation-name: twinkle-1;
    animation-duration: 1s;
  }

  .star-2 {
    margin-top: 25%;
    margin-left: 25%;
    animation-name: twinkle-2;
    animation-duration: 1s;
  }

  @keyframes twinkle-1 {
    20% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

  @keyframes twinkle-2 {
    20% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

  #back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
  }
</style>

<div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>

Solution

// solution required

2.3 KiB Raw Blame History