4.1 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78a7367417b2b2512adf	Imparare come funzionano i @keyframes CSS e le proprietà delle animazioni	0	https://scrimba.com/c/cakprhv	301059	learn-how-the-css-keyframes-and-animation-properties-work

--description--

Per animare un elemento, devi conoscere le proprietà dell'animazione e la regola @keyframes. Le proprietà dell'animazione controllano come si comporta l'animazione e la regola @keyframes controlla cosa succede durante quell'animazione. Ci sono otto proprietà di animazione in totale. Questa sfida sarà semplice e coprirà prima le due più importanti:

animation-name imposta il nome dell'animazione, che viene successivamente utilizzato da @keyframes per dire al CSS quali regole vanno seguite con quali animazioni.

animation-duration imposta la durata dell' animazione.

@keyframes specifica cosa succede esattamente all'interno dell'animazione per tutta la durata. Questo viene fatto dando proprietà CSS per specifici "frame" durante l'animazione, con percentuali comprese tra 0% e 100%. Se si confronta questo con un film, le proprietà CSS per 0% è come l'elemento viene mostrato nella scena di apertura. Le proprietà CSS per il 100% sono come l'elemento appare alla fine, proprio prima dei titoli di coda. Quindi il CSS applica la magia per trasferire l'elemento durante la durata data fino all'uscita di scena. Ecco un esempio per illustrare l'utilizzo di @keyframes e le proprietà dell'animazione:

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

Per l'elemento con l'id anim, lo snippet di codice qui sopra imposta l'animation-name a colorful e imposta l'animation-duration a 3 secondi. Quindi la regola @keyframes si lega alla proprietà di animazione con il nome colorful. Imposta il colore a blu all'inizio dell'animazione (0%) e fai in modo che passi a giallo alla fine dell'animazione (100%). Non sei limitato alle transizioni iniziali, puoi impostare le proprietà per l'elemento per qualsiasi percentuale compresa tra 0% e 100%.

--instructions--

Crea un'animazione per l'elemento con l'id rect, impostando l'animation-name su rainbow e la animation-duration a 4 secondi. Successivamente, dichiara una regola @keyframes, e imposta il background-color all'inizio dell'animazione (0%) a blu, al centro dell'animazione (50%) a verde, e alla fine dell'animazione (100%) a giallo.

--hints--

L'elemento con id di rect dovrebbe avere una proprietà animation-name con un valore di rainbow.

assert($('#rect').css('animation-name') == 'rainbow');

L'elemento con id di rect dovrebbe avere una proprietà animation-duration con un valore di 4s.

assert($('#rect').css('animation-duration') == '4s');

La regola @keyframes dovrebbe usare l'animation-name di rainbow.

assert(code.match(/@keyframes\s+?rainbow\s*?{/g));

La regola @keyframes per rainbow dovrebbe usare un background-color di blue allo 0%.

assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));

La regola @keyframes per rainbow dovrebbe usare un background-color di green al 50%.

assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));

La regola @keyframes per l'arcobaleno dovrebbe usare un background-color di yellow al 100%.

assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));

--seed--

--seed-contents--

<style>
  div {
    height: 40px;
    width: 70%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
  }

  #rect {


  }




</style>
<div id="rect"></div>

--solutions--

<style>
  div {
    height: 40px;
    width: 70%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
  }

  #rect {
    animation-name: rainbow;
    animation-duration: 4s;
  }

  @keyframes rainbow {
    0% {
      background-color: blue;
    }
    50% {
      background-color: green;
    }
    100% {
      background-color: yellow;
    }
  }
</style>
<div id="rect"></div>

4.1 KiB Raw Blame History