Comment utiliser la propriété d'animation en CSS3

Il existe six attributs d'animation en CSS3, qui sont le nom de l'animation, le temps requis pour terminer l'animation, la vitesse, le délai, la vitesse de lecture et s'il y a une lecture inversée. Cet article vous sera expliqué en détail. La méthode d'attribut d'animation en CSS3 a une certaine valeur de référence, j'espère qu'elle sera utile à tout le monde.

CSS est principalement utilisé pour décrire le style et la mise en page des pages Web, et CSS3 est la dernière norme CSS. Il fournit plus de méthodes et en utilisant CSS3, vous pouvez créer des animations pour enrichir le contenu des pages Web. partagez CSS3 avec vous. Attribut d'animation dans - animation

Faites attention aux problèmes de compatibilité des navigateurs lors de l'utilisation

Internet Explorer 10, Firefox et Opera prennent en charge l'attribut d'animation.

Safari et Chrome prennent en charge l'attribut -webkit-animation

Les problèmes de compatibilité du navigateur doivent donc être pris en compte lors de l'écriture de programmes

attribut d'animation

est utilisé pour définir six propriétés d'animation :

(1) animation-name : Spécifie le nom de l'animation.

animation-name:demo//Internet Explorer 10、Firefox 以及 Opera 浏览器中
-webkit-animation-name:demo//Safari 和 Chrome

(2) durée d'animation : le temps nécessaire pour terminer l'animation (en secondes et millisecondes)

animation-duration：3s；
-webkit-animation-duration:3s;

(3) fonction de synchronisation d'animation : vitesse d'animation Courbe

linéaire : Jouer à vitesse constante

facilité : La vitesse d'animation est lente au début puis s'accélère et ralentit à la fin (par défaut)

facilité -in : signifie que l'animation démarre à faible vitesse

ease-out : signifie que l'animation se termine à faible vitesse.

ease-in-out : L'animation démarre et se termine à faible vitesse

cubic-bezier(n,n,n,n) : Définissez la valeur souhaitée dans la fonction cubique-bezier , oui Valeur de 0 à 1

animation-timing-function：ease；
-webkit-animation-timing-function:ease;

(4) animation-delay : temps de retard du début de l'animation

animation-delay：3s；
-webkit-animation-delay:3s;

(5) animation-iteration-count : le nombre de fois où l'animation est jouée

n : La valeur du nombre de fois que l'animation personnalisée est jouée

infini : fait référence à l'animation jouant en boucle infinie

animation-iteration-count：4；//循环四次
-webkit-animation-iteration-count:infinite;//循环无数次

( 6) animation-direction : si l'animation est jouée à l'envers à tour de rôle

normal L'animation doit être jouée normalement (par défaut)

alternative L'animation doit être jouée à l'envers à tour de rôle

animation-direction：normal;
-webkit-animation-direction:alternate;

Laissez un petit carré se déplacer dans la direction inférieure droite et supérieure gauche

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:demo;
animation-iteration-count：infinite;
animation-duration:2s;
animation-timing-function:ease;
animation-delay:0.1s;
animation-direction: alternate; 
｝
/* Safari and Chrome 浏览器*/
-webkit-animation:demo;/*设置动画名称*/
-webkit-animation-iteration-count：infinite;/*动画执行次数*/
-webkit-animation-duration:5s;/*动画花费时间*/
-webkit-animation-timing-function:ease;/*动画速度*/
-webkit-animation-delay:2s;/*动画延迟*/
-webkit-animation-direction: alternate; /*动画是否反向*/
}
/*设置动画运行区域*/
@keyframes demo
{
	0% {background-color: pink;left:0;top:40px;}
	25%{background-color: hotpink;left:300px;top:40px;}
	50%{background-color: yellow;left:300px;top:340px;}
	75%{background-color: blue;left:0;top:340px;}
	100%{background-color: green;left:0;top:30px;}
}
/*Safari and Chrome浏览器*/
@-webkit-keyframes demo
{
    0% {background-color: pink;left:0;top:40px;}
	25%{background-color: hotpink;left:300px;top:40px;}
	50%{background-color: yellow;left:300px;top:340px;}
	75%{background-color: blue;left:0;top:340px;}
	100%{background-color: green;left:0;top:30px;}
}
</style>

Rendu :

Résumé : Ce qui précède est le contenu de cet article. J'espère que tout le monde pourra comprendre l'animation en CSS3 à travers cet article

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!