Introduction détaillée aux propriétés liées à l'animation CSS3 et aux règles d'images clés

Quand j'ai écrit le cube tridimensionnel hier, j'ai utilisé la syntaxe de animation

Venez au système aujourd'hui pour réviser
La transition a Sa limitation
est simple, mais elle ne peut changer qu'entre deux états
et elle nécessite que le pilote de événement puisse à
Vous ne pouvez pas vous déplacer tout seul
Donc, afin de résoudre ce problème
Nous avons besoin d'une animation d'animation

Animation

Si vous souhaitez obtenir un effet d'animation
uniquement animationLes attributs ne suffisent pas
Nous avons également besoin de @clésrègles de frames
Regardons d'abord un exemple

p class="demo"></p>

.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 2s linear;}@keyframes change {
    0% {        background-color: red;    }
    50% {        background-color: purple;    }
    100% {        background-color: lime;    }}

Quand le la souris survole, l'élément D'abord rouge puis passe au violet puis passe au vert

Regardons d'abord les règles des @keyframes

images clés

Dans @keyframes, nous définissons les images clés de l'animation
puis l'animation exécutera la transition en fonction de l'état d'image que nous avons spécifié dans les images clés images clés
0% - 100% représente la transition temporelle de l'animation
0 % et 100% dans les règles,
Peut être remplacé par des mots-clés from et to

@keyframes xxx {    from {        ......
    }
    to {
        ......
    }
}

---

Si nous omettons le cadre de départ, le navigateur effectuera la transition selon son style d'origine

@keyframes change {
    100% {        background-color: lime;    }}

---

De plus, on peut aussi écrire les mêmes images ensemble comme ceci

@keyframes change {    from,to {        background-color: red;    }
    50% {        background-color: blue;    }}

animation

l'animation est un Attribut composite, Il existe les sous-propriétés suivantes

• animation-name
  Spécifiez le nom de l'animation des images clés

• animation- durée
  Spécifiez le temps d'exécution de l'animation

• animation-timing-function
  Spécifiez la courbe de vitesse de l'animation, la valeur par défaut est "ease"

• animation-delay
  Spécifiez le temps de retard de l'animation, par défaut "0" pas de délai

• animation -iteration-count
  Spécifie le nombre de fois que l'animation est jouée, la valeur par défaut est "1" et est exécutée une fois

• animation-direction
  Spécifie la direction d'exécution de l'animation, la valeur par défaut est "normale"

Cet attribut composite est plus compliqué que notre transition
Les quatre premiers attributs ne sont pas nombreux Expliqués, similaires à notre transition
Pour ceux qui ont oublié, cliquez ici -> Portail

animation-iteration-count temps de lecture de l'animation En plus de remplir le numéro,
peut également utiliser un mot-clé couramment utilisé infiniboucle

animation-direction a les valeurs d'attribut suivantes en plus de la normale.

• inverse
  Lire l'animation en sens inverse

• alternative
  Lire l'animation à son tour

• alternate-reverse
  Animation de rotation inverse

Expliquée à travers un exemple

.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 1s 2 linear;}@keyframes change {    to {        width: 200px;    }}

Par défautnormal :

Deux animations de test :
100px -> >

inverse

---

 :

.demo:hover {    animation: change 1s 2 linear reverse; /*改*/}

Deux animations de test : 200px ->
alternative
 :

Deux animations de test :

---

100px -> 🎜>

.demo:hover {    animation: change 1s 2 linear alternate; /*改*/}

alternate-reverse

 :
Deux animations de test : 200px -> -mode

Les deux choses dont je veux parler ci-dessous Aucun des attributs n'est un sous-attribut de l'animation
, ils ne peuvent donc pas être écrits en animation

---

animation-fill-mode précise l'état de

.demo:hover {    animation: change 1s 2 linear alternate-reverse; /*改*/}

objet

en dehors du temps d'animation, et la valeur par défaut est "aucun" En plus de aucun, il existe les valeurs d'attribut suivantes



pour

wards

Une fois l'animation terminée, conservez le dernier attribut (défini dans la dernière image)

backwards  
在animation-delay指定时间内、动画显示之前，应用起始属性（定义在第一帧）

both  
应用forwards和backwards两种模式

---

forwards
这个属性还是蛮有用的
还是我们上面的例子

.demo:hover {    animation: change 1s linear; /*改*/
    animation-fill-mode: forwards; /*改*/}

我们发现1s之后，元素并没有回到最初的100px，而是保持了我们最后一帧的200px状态

---

backwards  
理解这个属性，我们需要先加一个延时

.demo:hover {    animation: change 1s linear 1s; /*改*/
    /*animation-fill-mode: backwards;*/ /*待增*/}@keyframes change {    from {  /*增*/
        width: 150px;    }
    to {        width: 200px;    }}

我就不配图了
我们发现鼠标悬浮后，1s后瞬间变为150px，然后再过渡到200px
hover-0s -> 1s -> 2s
100px ->瞬变150px –> 过渡到200px

现在增加backwards

.demo:hover {    animation: change 1s linear 1s; /*改*/
    animation-fill-mode: backwards; /*增*/}

这回我们发现鼠标悬浮的一瞬间就变为15px，然后1s后过渡到200px
hover-0s -> 1s -> 2s
瞬变150px ->150px –> 过渡到200px
这就是backwards的作用，延迟前就应用第一帧动画的样式，然后准备过渡

animation-play-state

animation-play-state    指定动画的运行或暂停。默认 “running”
除了running还有paused
利用这个属性再配合js我们可以控制动画的暂停和运行

demo.style.animationPlayState = "paused";

---

今天的动画就先写这么多，感觉写了很长时间
日后再总结动画相关的性能问题

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!