Les animations CSS

Pascal FurlanCSS

Les animations CSS sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d’une période via des étapes intermédiaires (keyframes en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.

Les propriétés CSS :

animation, animation-delay,animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function

Les règles CSS :

La règle @@keyframes permet de définir les étapes qui composent la séquence d’une animation CSS. Cela permet de contrôler une animation plus finement que ce qu’on pourrait obtenir avec les transitions.

Des exemples d’animation :

Animations css 01

Les animations CSS|démonstration

Survoler l’exemple pour déclencher l’animation

animation-name: animation01; animation-duration:3s; animation-delay:1s; animation-timing-function: linear;
4
animation-name: animation01; animation-duration:3s; animation-delay:1s; animation-timing-function: linear; animation-iteration-count:infinite;
4
animation-name: animation01; animation-duration:3s; animation-delay:1s; animation-timing-function: linear; animation-iteration-count:infinite; animation-direction: alternate-reverse;
4
animation-name: animation01; animation-duration:3s; animation-delay:1s; animation-timing-function: linear; animation-fill-mode: both;
4
#exemple05 .sprite { animation-name: animation01; animation-duration: 1s; animation-iteration-count: infinite; animation-play-state: paused; } #exemple05:hover .sprite { animation-play-state: running; }
4
Animations css 02

Les animations CSS | Exercices 02

Survoler l’exemple pour déclencher l’animation