En-tete Astuces divers html et css
Classic Moderne

Animations CSS:

Les animations CSS rendent possible la création de transitions animées depuis une décoration CSS à une autre. Les animations consistent en deux composants : un style décrivant l'animation et un ensemble de keyframes qui indique les états de début et de fin du style CSS de l'animation, ainsi que des points de passage intermédiaires.
On compte trois avantages des animations CSS par rapport aux techniques d'animation utilisant des scripts habituelles :

1. Elles sont faciles à utiliser pour les animations simples
2. Les animations sont fluides, même avec un système plutôt chargé.
3. Laisser le navigateur contrôler la séquence d'animation permet au navigateur d'optimiser sa performance et son efficacité en réduisant la fréquence de mise à jour des animations dans les onglets non visibles par exemple.


Configuration de l'animation

Pour créer une séquence animée en CSS, il faut décorer l'élément que vous souhaitez animer à l'aide de la propriété animation et de ses sous-propriétés. Ceci vous permet de configurer la temporisation et la durée de l'animation, ainsi que d'autres détails concernant la manière dont l'animation se déroule. Ceci ne définit pas l'apparence réelle de l'animation, qui elle est définie par les règles @keyframes comme défini dans Définition de la séquence en utilisant les keyframes ci-dessous.

Les sous-propriétés de la propriété animation sont :

animation-delay
Configure le délai entre l'instant auquel l'élément est chargé et le début de l'animation.

animation-direction
Configure si l'animation doit se jouer tour à tour en avant puis en arrière à chaque cycle de la séquence ou si elle doit revenir à son point de départ ou se répéter.

animation-duration
Configure la durée que l'animation doit utiliser pour compléter un cycle.

animation-iteration-count
Configure le nombre de fois que l'animation doit se répéter : vous pouvez définir infinite pour que l'animation se répète indéfiniment.

animation-name
Défini le nom de la règle @keyframes décrivant les keyframes de l'animation.

animation-play-state
Vous permet de mettre en pause et de reprendre la lecture de la séquence animée.

animation-timing-function
Configure la temporisation de l'animation ; c'est-à-dire, comment l'animation se déroule entre les keyframes, en définissant les courbes d'accélération.

animation-fill-mode
Configure les valeurs qui doivent être appliquée par l'animation avant et après qu'elle soit exécutée.

Définition de la séquence en utilisant les keyframes

Une fois la temporisation de l'animation définie, il est nécessaire de définir l'apparence de l'animation. Ceci est réalisé en mettant en place une keyframe ou plus en utilisant les règles @keyframes. Chaque keyframe décrit comment l'élément animé doit être rendu à un certain instant de la séquence animée.
Puisque la temporisation de l'animation est définie dans le style CSS qui configure l'animation, les keyframes utilisent un percentage pour indiquer l'instant dans la séquence à laquelle elle est située. 0% indique le premier instant de la séquence, tandis que 100% indique l'instant final de l'animation. Ces deux instants doievent être spécifiés pour que le navigateur sache où l'animation doit commencer et terminer ; puisqu'elle sont primordiales, ces deux instants ont aussi des alias particuliers : from et to.
Vous pouvez aussi ajouter des keyframes additionnelles qui décrivent des état intermédiaires entre le point de départ et le point d'arrivée de l'animation.

Mon Chat photo 4














Haut-de-Page