10. Animații CSS

Un exemplu de specificare declarativă a animațiilor (aici, animarea unei imagini)

HTML

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png" alt="Tux" id="tux" />
</div>

CSS

#tux {
  animation-name: tux-animat;
  animation-duration: 7s;
  animation-iteration-count: infinite; /* de experimentat cu alte valori numerice */
  animation-play-state: running;
}

@keyframes tux-animat {
  from {
    transform: rotate(0deg);
    width: 40%;
  }
  50% {
    opacity: 0.5;
  }
  to {
    transform: rotate(180deg);
    width: 40%;
  }
}

div {
  width: 400px;
  margin: 0 auto;
}