Une discussion détaillée de la séquence d'animation des effets spéciaux d'animation CSS3

Tout le monde sait que l'animation est une propriété du CSS. Cet article présente principalement les informations pertinentes sur la séquence d'animation (animation) des effets spéciaux d'animation CSS3. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et vous le donner. comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Examinez d'abord les différents paramètres ajoutés à l'animation d'animation :

(1) paramètre infini, indiquant que l'animation bouclera à l'infini. Un paramètre de temps peut également être inséré entre la courbe de vitesse et le nombre de lectures pour définir le temps de retard de l'animation. Si vous souhaitez que l'icône commence à tourner après 1 seconde et tourne deux fois, le code est le suivant

.close:hover::before{
    -webkit-animation: spin 1s linear 1s 2;
    animation: spin 1s linear 1s 2;
}

(2) paramètre alternatif. Ajoutez le paramètre de lecture inversée alternatif à l'animation d'animation. Après avoir ajouté ce paramètre, l'animation sera jouée à l'envers un nombre pair de fois.

.close:hover::before{
    -webkit-animation: spin 1s linear 1s 2 alternate;
    animation: spin 1s linear 1s 2 alternate;
}

Parmi les paramètres d'attribut d'animation, le paramètre de retard est l'un de nos paramètres les plus couramment utilisés. Lorsqu'il y a plusieurs objets animés, nous utilisons souvent des paramètres de retard pour former des séquences d'animation. Par exemple, le code suivant définit 5 icônes différentes :

<span class="close icon-suningliujinyun">Close</span>
<span class="close icon-shousuo">Close</span>
<span class="close icon-zhankai">Close</span>
<span class="close icon-diaoyonglian">Close</span>
<span class="close icon-lingshouyun">Close</span>

Le style de base de l'icône est le même que celui de l'icône Fermer précédente. La différence est que les icônes. voici tous définis comme étant des blocs en ligne afin qu'ils puissent être disposés horizontalement. Le code est le suivant :

.close{
    font-size:0px;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    background:#FFF;
    color:#8b8ab3;
    text-align:center;
}
.close::before{
    font-family: 'suningcloud';
    speak:none; /*使文本内容不能通过屏幕阅读器等辅助设备读取*/
    font-size:48px;
    display:block;
}

s'affiche lors de l'initialisation, comme le montre la figure ci-dessous

Ensuite, pour ajouter une animation à l'icône, décalez la position initiale de l'icône vers le bas de -100 %, puis déplacez-la vers le haut jusqu'à la position initiale. Au cours de ce processus, l'icône passe également de complètement transparente à complètement opaque <.>

Les effets d'animation des cinq icônes ci-dessus sont tous exécutés en même temps Afin de rendre le mouvement de l'icône séquentiel, nous ajouterons un délai à chaque animation. . Différent de la méthode précédente, nous pouvons définir le délai d'animation directement via l'attribut animation-delay. Le code est le suivant :

.close{
	font-size:0px;/*使span中的文字不显示*/
	cursor:pointer;/*使鼠标指针显示为手型*/
	display:inline-block;
	width:100px;
	height:100px;
	line-height:100px;
	border-radius:50%;/*使背景形状显示为圆形*/
	background:#FFF;
	color:#8b8ab3;
	text-align:center;
	/**/
	-webkit-animation: moving 1s linear;
	animation: moving 1s linear;
}

@-webkit-keyframes moving {
    from {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@keyframes moving {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}

Dans le code ci-dessus, nous set Les temps de retard des cinq icônes sont respectivement de 0, 0,1, 0,2, 0,3 et 0,4 s. En fait, un délai de 0 seconde est la valeur par défaut, donc la première icône n'a pas non plus besoin de définir un code de retard. Page de test, l'effet d'animation est comme indiqué sur la figure.

.icon-suningliujinyun{
	-webkit-animation-delay:0s;
	animation-delay: 0s;
}
.icon-shousuo{
	-webkit-animation-delay:.1s;
	animation-delay: .1s;
}
.icon-zhankai{
	-webkit-animation-delay:.2s;
	animation-delay: .2s;
}
.icon-diaoyonglian{
	-webkit-animation-delay:.3s;
	animation-delay: .3s;
}
.icon-lingshouyun{
	-webkit-animation-delay:.4s;
	animation-delay: .4s;
}

Je l'ai actualisé deux fois et j'ai constaté qu'au tout début, plusieurs icônes clignotaient en haut. Ceci est considéré comme un bug

La raison de ce bug est qu'à l'exception de la première icône, les autres icônes ont un certain retard d'animation. Lorsque l'animation ne démarre pas, l'icône ne se déplace pas et est complètement. opaque. Ce n'est que lorsque l'animation démarre que l'icône passe à l'état de démarrage de l'animation entièrement transparente et décalée.

Solution : Vous devez utiliser l'attribut animation-fill-mode de l'animation d'animation. Cette propriété spécifie l'état de l'élément en dehors du temps d'animation. Si la valeur est en avant, cela signifie que la valeur d'attribut dans la dernière image clé est conservée une fois l'animation terminée. Lorsque la valeur est en arrière, c'est exactement le contraire, ce qui signifie que la valeur d'attribut dans la première image clé est appliquée. à l'élément avant que l'animation ne soit retardée, et lorsque la valeur est les deux, cela signifie que les paramètres avant et arrière sont inclus. Dans cet exemple, nous pouvons utiliser l'envers ou les deux,

L'effet est le suivant :

.close{
    font-size:0px;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    background:#FFF;
    color:#8b8ab3;
    text-align:center;
    /**/
    -webkit-animation: moving 1s linear;
    animation: moving 1s linear;
    /*清除抖动*/
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
}

PS : En animation, vous pouvez aussi définir la courbe de vitesse comme l'animation de transition

Par exemple : dans cet exemple, on espère que le mouvement de l'icône a un petit effet élastique, c'est à dire lorsque l'icône se déplace vers le haut, il ne ralentit pas et ne s'arrête pas. Au point final, il continue de monter après avoir atteint le point final, il se déplace dans la direction opposée et revient au point final, formant un effet réciproque. .

Bien sûr, nous pouvons utiliser l'animation d'images pour obtenir cet effet, mais ce sera plus facile si nous utilisons une courbe de vitesse. Pour utiliser des courbes personnalisées, nous avons souvent besoin de certains outils, car l'animation CSS3 utilise la fonction mathématique Cubic Bezier pour générer la courbe de vitesse, et les paramètres de cette fonction ne sont pas intuitifs. On peut utiliser des sites comme cubique-bezier.com pour ajuster visuellement la courbe de vitesse.

Ensuite, nous pouvons écrire la courbe de vitesse dans les paramètres de l'attribut d'animation. Le code est le suivant :

L'effet est le suivant. ci-dessous :

.close{
    font-size:0px;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    background:#FFF;
    color:#8b8ab3;
    text-align:center;
    /**/
    /*-webkit-animation: moving 1s linear;
    animation: moving 1s linear;*/
    /*cubic-bezier*/
    -webkit-animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);
      animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);
    /*清除抖动*/
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
}

Recommandations associées :

Comment implémenter des effets d'animation de boutons radio en CSS3

Pure CSS3 réalise des effets spéciaux d'animation de rotation de cube d'image 3D

Introduction à l'utilisation habile du plugin d'effets spéciaux d'animation d'animation CSS3

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!