Implémentation fonctionnelle de la propriété Transitions et de la propriété Animations de la propriété d'animation CSS3

Le contenu de cet article concerne l'implémentation fonctionnelle de l'attribut Transitions et de l'attribut Animations des attributs d'animation CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1 Fonction Transitions

(1) Prise en charge du navigateur :

Jusqu'à présent : Safari3.1 ou supérieur, Chrome8 ou supérieur, Firefox4 ou supérieur, Opera10 Les navigateurs ci-dessus et IE11 ou supérieur prennent en charge cette fonction.

(2) Fonction

En CSS3, la fonction Transitions implémente la fonction d'animation en faisant passer en douceur un attribut d'un élément d'une valeur d'attribut à une autre dans un délai spécifié.

(3) Comment utiliser

transition : fonction de synchronisation de durée de propriété

propriété : indique laquelle Attribut pour une transition en douceur.

durée : indique le temps temps nécessaire pour terminer la transition en douceur des attributs.

fonction de synchronisation : indique quelle méthode est utilisée pour effectuer une transition en douceur.

div{
background-color：#ffff00;
transition：background-color 1s linear;//在1秒内让div元素的背景色从黄色平滑过渡到浅蓝色。
}
div{
background-color：#00ffff；
}

(4) Une autre méthode d'utilisation

transition-property：background-color；
transition-duration：1；
transition-timing-function：linear；

(5) attribut de transition-delay

Spécifie l'effet spécial d'animation de transformationDelay Combien de temps faut-il pour démarrer l'exécution. Les valeurs des propriétés peuvent être spécifiées en secondes ou en millisecondes.

transition-delay：1s；
//或 transition：background-color 1s linear 2s；（在第四个参数中书写延迟时间）

(6) Utilisez la fonction Transitions pour effectuer une transition en douceur de plusieurs valeurs d'attribut en même temps

transition：background-color 1s linear，color 1s linear，width 1s linear；

(7) Effets d'animation tels que le mouvement et la rotation

img{
position：absolute；top：70px；left：0；
transform：rotate（0deg）；
transition：left 1s linear，transform 1s linear；
}
 img：hover{
left：30px；
transform：rotate（720deg）；
}

( 8) Inconvénients

ne peut spécifier que la valeur de début et la valeur de fin de l'attribut, puis obtenir une transition en douceur entre les deux valeurs d'attribut, et ne peut pas obtenir d'effets d'animation plus complexes.

2 Fonctions d'animations

(1) Prise en charge du navigateur :

Jusqu'à présent : Safari4 ou supérieur, Chrome2 ou supérieur, Firefox20 ou supérieur, Opera18 ou ci-dessus, les navigateurs IE11 et supérieurs prennent en charge cette fonction.

(2) La fonction

est la même que les transitions, les deux obtiennent des effets d'animation en modifiant les valeurs d'attribut des éléments.

Différence : la fonction Animations permet d'obtenir des effets d'animation plus complexes en définissant plusieurs images clés et en définissant les valeurs d'attribut des éléments dans chaque image clé.

(3)Créer une collection d'images clés

@keyframes nom de la collection d'images clés {Code pour créer des images clés>

(4)Code pour créer des images clés (similaires à ce qui suit)

40 %{code de style dans cette image clé

(40 % signifie que l'image modifiée est située à 40 % de l'animation entière processus, l'image de début est de 0% et l'image de fin est de 100%)

@keyframes mycolor{
0%{
background-color：red;
}
40%{
background-color：darkblue;
}
70%{
background-color：yellow;
}
100%{
background-color：red;
}
}

(5)

Utilisez l'ensemble d'images clés dans le style de l'élément

div{
animation-name：my-color； //指定关键帧集合的名称
animation-duration：5s； //指定完成整个动画所花费的时间
animation-timing-function：linear； //指定实现动画的方法
}

(6) Autres attributs

animation-delay : utilisé pour spécifier combien de secondes ou de millisecondes retarder avant de démarrer l'animation.

animation-iteration-count : utilisé pour spécifier le nombre d'exécutions d'animation, qui peut être spécifié comme infini.

animation-direction : utilisé pour spécifier la direction d'exécution de l'animation. Les valeurs d'attribut spécifiables incluent :

• normal : valeur initiale (revient à l'état initial après l'exécution de l'animation)

• alternative : alternative exécution de l'animation Direction

• reverse : Exécuter l'animation dans le sens inverse

• alternate-reverse : Changer alternativement le sens d'exécution de l'animation de le sens inverse

(7) Lors de la définition de l'animation d'animation dans une ligne de code de style, utilisez la méthode d'écriture suivante

animation : le nom de l'image clé, le le temps d'exécution de l'animation, la méthode de mise en œuvre de l'animation, combien de secondes attendre avant de démarrer Le nombre d'exécutions de l'animation, le sens d'exécution de l'animation

(8) Pour réaliser l'animation de ; plusieurs valeurs d'attribut changeant en même temps

Spécifiez simplement ces valeurs d'attribut​​en même temps dans chaque image clé.

3 实现动画的方法

方法	属性值的变化速度
linear	在动画开始时与结束时以同样速度进行改变
ease-in	动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out	动画开始时速度很快，然后速度沿曲线值进行放慢
ease	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
ease-in-out	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢

4 实现网页的淡入效果

通过在开始帧与结束帧中改变页面的opacity属性的属性值来实现页面的淡入效果。

@keyframes fadein{
0%{
opacity：0；
background-color：white;
}
100%{
opacity：1；
background-color：white;
}
body{
animation-name： fadein； 
animation-duration：5s； 
animation-timing-function：linear； 
animation-iteration-count：1；
}

相关推荐：

css3动画属性animation（动画）_html/css_WEB-ITnose

CSS3展现精彩的动画效果 css3的动画属性_html/css_WEB-ITnose

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!