freeCodeCamp/curriculum/challenges/italian/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78a7367417b2b2512ae2	Creare una direzione visuale dissolvendo un elemento da sinistra a destra	0	https://scrimba.com/c/cGJqqAE	301054	create-visual-direction-by-fading-an-element-from-left-to-right

--description--

Per questa sfida, cambierai l'opacity di un elemento animato in modo che svanisca gradualmente mentre raggiunge il lato destro dello schermo.

Nell'animazione visualizzata, l'elemento circolare con lo sfondo gradiente si muove verso destra dal 50% dell'animazione per la regola @keyframes.

--instructions--

Prendi l'elemento con l'id ball e aggiungi la proprietà opacity impostata a 0.1 al 50%, per poi farlo svanire mentre si muove verso destra.

--hints--

La regola keyframes per la dissolvenza deve impostare la proprietà opacity a 0.1 al 50%.

assert(
  code.match(
    /@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi
  )
);

--seed--

--seed-contents--

<style>

  #ball {
    width: 70px;
    height: 70px;
    margin: 50px auto;
    position: fixed;
    left: 20%;
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    animation-name: fade;
    animation-duration: 3s;
  }

  @keyframes fade {
    50% {
      left: 60%;

    }
  }

</style>

<div id="ball"></div>

--solutions--

<style>
  #ball {
    width: 70px;
    height: 70px;
    margin: 50px auto;
    position: fixed;
    left: 20%;
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    animation-name: fade;
    animation-duration: 3s;
  }

  @keyframes fade {
    50% {
      left: 60%;
      opacity: 0.1;
    }
  }
</style>
<div id="ball"></div>