Faire son site 11 : Référence CSS - animation-name

animation-name

La propriété animation-name permet d'itentifier un élément sur lequel va s'appliquer une règle @keyframes qui aura ce nom comme argument. Ce nom doit être composé exclusivement de lettres de a à z, de chiffres de 0 à 9 ainsi que des caractères tiret - et tiret bas _. Le nom doit commencer par une lettre.


<style>
#carre {
  width: 150px;
  height: 150px;
  background-color: gray;
  animation-name: exemple;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes exemple {
  from { background-color: gray; }
    to { background-color: deeppink; }
}
</style>

<div id="carre"></div>