Eigenschap animation-name

De eigenschap animation-name specificeert de naam van de animatie (of animaties) die op dit element wordt toegepast. De animatienaam moet hetzelfde zijn als de naam die is gedefinieerd bij het maken van de keyframes @keyframes.

Syntaxis

cssselector {
  animation-name: animatienaam;
}

Voorbeeld

In dit voorbeeld heeft de animatie de naam move:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-name: move;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Zie ook

de eigenschap animation-duration,
die de duur van de animatie specificeert
de eigenschap animation-delay,
die de vertraging vóór het afspelen van de animatie specificeert
de eigenschap animation-timing-function,
die de snelheidscurve van de animatie specificeert
de eigenschap animation-iteration-count,
die het aantal herhalingen van de animatie specificeert
de eigenschap animation-direction,
die de richting van de animatie specificeert
de eigenschap animation-fill-mode,
die de toestand van de animatie specificeert
de eigenschap animation-play-state,
die het mogelijk maakt de animatie te pauzeren
de eigenschap animation,
een korte notatie voor animaties
de regel @keyframes,
die de keyframes van de animatie definieert
vloeiende overgangen transition, die een animatie bij hover op een element vertegenwoordigen