CSS3 Animations (Animations)

CSS3La fonction d'animation vous permet de créer des animations par points clés.

Créer CSS3Animation

Dans le chapitre précédent, vous avez appris comment exécuter des animations simples, par exemple via CSS3La fonction de transition anime les attributs d'une valeur à une autre. Cependant, CSS3Les transitions sont presque impossibles à contrôler pour déterminer comment l'animation évolue au fil du temps.

CSS3Les animations vont plus loin dans le domaine des animations basées sur les points clés, vous permettant de spécifier les changements des propriétés CSS au fil du temps en fonction d'un ensemble de points clés, par exemple des animations Flash.

La création d'une animation CSS est un processus en deux étapes, comme dans les exemples suivants :

• La première étape de la création d'une animation CSS consiste à définir les points clés individuels et à utiliser les déclarations de points clés pour nommer l'animation.

• La deuxième étape consiste à utiliser animation-l'attribut name fait référence aux points clés par nom et ajoute animation-duration et d'autres propriétés optionnellesPropriétés d'animationpour spécifier le comportement de l'animation.

Cependant, il n'est pas nécessaire de définir les règles de points clés avant de les utiliser ou d'appliquer les règles de points clés. L'exemple suivant vous montrera comment utiliser CSS3Les fonctionnalités d'animation définiront<div>l'animation de déplacement d'une boîte d'un emplacement horizontal à un autre.

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: rouge;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name: moveit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name: moveit;
　　　　animation-duration:　2s;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes moveit {
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes moveit {
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Vous devez spécifier au moins deux propriétés animation-name et animation-duration (supérieur à 0), pour exécuter l'animation. Cependant, toutes les autresPropriétés d'animationsont optionnelles, car leurs valeurs par défaut ne bloquent pas l'animation.

Définir les points clés

Les points clés sont utilisés pour spécifier les valeurs des propriétés d'animation à chaque étape de l'animation. Les points clés sont définis à l'aide deRègles CSS-spécifiés par @keyframes. Les sélecteurs des règles de style des points clés commencent par un pourcentage (%) ou un mot-clé de (égal à 0%) à (égal à100%). Les sélecteurs sont utilisés pour spécifier la position de construction des points clés au cours de l'animation.

Les pourcentages représentent la durée de l'animation en pourcentage, 0% représentant le début de l'animation,100% représente la fin,50% représente le point central, et ainsi de suite. Cela signifie2s dans l'animation50% de l'animation deviendra1s.

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　margin:　100px;
　　　　background: rouge;
　　　　position:　relative;
　　　　left: 0;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name: shakeit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name: shakeit;
　　　　animation-duration:　2s;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes shakeit {
　　　　12.5% {left:　-50px;}
　　　　25% {left:　50px;}
　　　　37.5% {left:　-25px;}
　　　　50% {left:　25px;}
　　　　62.5% {left:　-10px;}
　　　　75% {left:　10px;}
}
　
@keyframes shakeit {
　　　　12.5% {left:　-50px;}
　　　　25% {left:　50px;}
　　　　37.5% {left:　-25px;}
　　　　50% {left:　25px;}
　　　　62.5% {left:　-10px;}
　　　　75% {left:　10px;}
}

Propriétés abrégées d'animation

Beaucoup de propriétés doivent être prises en compte lors de la création d'une animation. Cependant, toutes les propriétés d'animation peuvent également être spécifiées dans une seule propriété pour raccourcir le code.

Cette propriété d'animation animation est une propriété abrégée, utilisée pour configurer en une seule fois, dans l'ordre énuméré, toutes les propriétés individuellesPropriétés d'animationPar exemple :

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: rouge;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation:　repeatit　2s　linear　0s　infinite　alternate;
　　　　
　　　　animation:　repeatit　2s　linear　0s　infinite　alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　repeatit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　repeatit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

CSS3Propriétés d'animation.

Le tableau suivant résume brièvement toutes les propriétés liées aux animations.