Maison > Article > interface Web > 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) 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
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.
(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 :
方法 | 属性值的变化速度 |
linear | 在动画开始时与结束时以同样速度进行改变 |
ease-in | 动画开始时速度很慢,然后速度沿曲线值进行加快 |
ease-out | 动画开始时速度很快,然后速度沿曲线值进行放慢 |
ease | 动画开始时速度很慢,然后速度沿曲线值进行加快,然后再沿曲线值进行放慢 |
ease-in-out | 动画开始时速度很慢,然后速度沿曲线值进行加快,然后再沿曲线值进行放慢 |
通过在开始帧与结束帧中改变页面的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!