Règle @keyframes CSS

In CSS, the @keyframes rule can be used to create animations, creating animations by gradually changing from one CSS style to another, during the animation process, you can change CSS style settings multiple times, specified changes occur using %, or the keywords 'from' and 'to', which is the same as 0% to100% is the same, 0% is the start of the animation,100% is when the animation is completed. For the best browser support, you should always define 0% and100% selector.

La règle @keyframes est une règle CSS3Nouvelle règle ajoutée dans les versions plus récentes de CSS, actuellement tous les navigateurs populaires prennent en charge cette règle (avec les préfixes correspondants des navigateurs), mais pas compatible avec IE 9et les versions antérieures des navigateurs.

Syntaxe de l'utilisation de la règle @keyframes

La syntaxe de cette règle est la suivante :

@keyframes animationname {keyframes-selector {css-styles;}};

Description des valeurs des attributs

animationname : définit le nom de l'animation ;

keyframes-selector : pourcentage de la durée de l'animation, les valeurs possibles : 0-100% (et 0% identique), from (et 0% identique), to (et100% est identique). Vous pouvez utiliser un animation keyframes-selectors ;

css-styles : un ou plusieurs attributs CSS valides ;

L'exemple suivant montre la règle réelle de @keyframes.

　　　　　　.box {
　　　　　　　　　　width:　50px;
　　　　　　　　　　height:　50px;
　　　　　　　　　　background: red;
　　　　　　　　　　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%;}
　　　　　　}

Paramètres

Le tableau suivant décrit les paramètres de cette règle.

Compatibilité du navigateur

Compatibilité des navigateurs pour l'attribut @keyframes ; les numéros dans le tableau ci-dessous représentent la version minimale des navigateurs prenant en charge cette propriété ; toutes les navigateurs populaires prennent en charge cette règle.

Lire davantage

Veuillez consulter les tutoriels suivants :Types de média CSS.