animation de séquence d'animation CSS3

Cette fois, je vous propose une animation de séquence d'animation CSS3. Quelles sont les précautions lors de l'utilisation de animation CSS3 d'animation de séquence. Ce qui suit est un cas pratique, jetons un coup d'œil.

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

(1) paramètre infini, ce qui signifie 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 ici sont définies sur inline-block afin que. ils peuvent ê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, ajoutez une animation à l'icône ; pour décaler la position initiale de l'icône vers le bas de -100 %, puis revenir vers le haut jusqu'à la position initiale. Au cours de ce processus, l'icône passe de complètement transparente à complètement opaque en même temps

.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%);
    }
}

Le. les effets d'animation des 5 icônes ci-dessus sont tous 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 :

.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;
}

Dans le code ci-dessus, nous définissons le temps de retard de 5 icônes respectivement. 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.

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 de

.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; 
}

est le suivant :

PS : Il peut également être utilisé. dans l'animation Définissez la courbe de vitesse comme une animation de transition

Par exemple, implémentation : Dans cet exemple, nous espérons que le mouvement de l'icône aura un petit effet élastique, c'est-à-dire que lorsque l'icône se déplace vers le haut, elle le fait ne ralentit pas et ne s'arrête pas au point final, mais continue après avoir atteint le point final. Déplacez-vous vers le haut, puis revenez dans la direction opposée jusqu'au point final après avoir dépassé une certaine distance, formant un effet réciproque.

Bien sûr, nous pouvons utiliser l'animation d'images pour obtenir un tel effet, mais il sera plus facile d'utiliser des courbes 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 :

.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; 
}

L'effet est comme indiqué ci-dessous :

.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser HTML et CSS pour implémenter Cornell Notes

Une brève discussion sur les problèmes de mise en page des pages Web CSS

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!