Maison >interface Web >tutoriel CSS >Je veux boucler tout ce code à l'infini
Salut les gars, j'ai ce code que je vais ajouter ci-dessous, j'essaie de le boucler en entier à l'infini après que la dernière image (imagetest5) ait terminé son animation et recommence à (test d'image1)
S'il vous plaît, pourriez-vous m'aider !!
Code :
@keyframes start-animation {
0% { opacité : 0 ; >
10% { opacité : 1 ; >
20% { opacité : 0 ; >
100 % { opacité : 0 ; >
>
@keyframes scintillent {
0 %, 100 % { opacité : 1 ; >
50 % { opacité : 0,3 ; >
>
.imagetest {
opacité : 0 ;
animation : démarrage de l'animation 20 s infini, scintillement 2 s infini ;
>
.imagetest1 {
opacité : 0 ;
animation :
fondu d'entrée 0,5 s, entrée facile 1 s infini,
flicker1 1s cubique-bézier(0,4, 0, 1, 1) 1s alterné infini,
disparaître1 0,5s cube-bézier(0,4, 0, 1, 1) 2s en avant ;
>
.imagetest2 {
opacité : 0 ;
animation :
fondu en entrée 0,5 s facile en 6 s infini,
flicker2 1s cubique-bézier(0,4, 0, 1, 1) 3s alterné infini,
disparaître2 0,5 s cube-bézier (0,4, 0, 1, 1) 4 s en avant ;
>
.imagetest3 {
opacité : 0 ;
animation :
fondu entrant en 0,5 s, facile en 10,5 s infini,
flicker3 1s cubique-bézier (0,4, 0, 1, 1) 5s alterné infini,
disparaître3 0,5s cube-bézier(0,4, 0, 1, 1) 6s en avant ;
>
.imagetest4 {
opacité : 0 ;
animation :
fondu en entrée 0,5 s facile en 15 s infini,
flicker4 1s cubique-bézier (0,4, 0, 1, 1) 7s alterné infini,
disparaître4 0,5s cube-bézier(0,4, 0, 1, 1) 8s en avant ;
>
.imagetest5 {
opacité : 0 ;
animation :
fondu en entrée 0,5 s facile en 17 s infini,
flicker4 1s cubique-bézier (0,4, 0, 1, 1) 7s alterné infini,
disparaître4 0,5s cube-bézier(0,4, 0, 1, 1) 8s en avant ;
>
@keyframes fondu entrant {
0% { opacité : 0 ; >
100 % { opacité : 1 ; >
>
@keyframes flicker1 {
0% { opacité : 1 ; >
5 %, 25 %, 50 %, 75 %, 95 %, 100 % { opacité : 0,8 ; >
10 %, 20 %, 30 %, 40 %, 60 %, 70 %, 80 %, 90 % { opacité : 0,6 ; >
15 %, 35 %, 55 %, 85 % { opacité : 0,4 ; >
45 %, 65 %, 88 % { opacité : 0,2 ; >
>
@keyframes flicker2 {
0% { opacité : 1 ; >
5 %, 25 %, 50 %, 75 %, 95 %, 100 % { opacité : 0,8 ; >
10 %, 20 %, 30 %, 40 %, 60 %, 70 %, 80 %, 90 % { opacité : 0,6 ; >
15 %, 35 %, 55 %, 85 % { opacité : 0,4 ; >
45 %, 65 %, 88 % { opacité : 0,2 ; >
>
@keyframes flicker3 {
0% { opacité : 1 ; >
5 %, 25 %, 50 %, 75 %, 95 %, 100 % { opacité : 0,8 ; >
10 %, 20 %, 30 %, 40 %, 60 %, 70 %, 80 %, 90 % { opacité : 0,6 ; >
15 %, 35 %, 55 %, 85 % { opacité : 0,4 ; >
45 %, 65 %, 88 % { opacité : 0,2 ; >
>
@keyframes flicker4 {
0% { opacité : 1 ; >
5 %, 25 %, 50 %, 75 %, 95 %, 100 % { opacité : 0,8 ; >
10 %, 20 %, 30 %, 40 %, 60 %, 70 %, 80 %, 90 % { opacité : 0,6 ; >
15 %, 35 %, 55 %, 85 % { opacité : 0,4 ; >
45 %, 65 %, 88 % { opacité : 0,2 ; >
>
@keyframes disparaissent1 {
0% { opacité : 1 ; >
100 % { opacité : 0 ; >
>
@keyframes disparaissent2 {
0% { opacité : 1 ; >
100 % { opacité : 0 ; >
>
@keyframes disparaît3 {
0% { opacité : 1 ; >
100 % { opacité : 0 ; >
>
@keyframes disparaissent4 {
0% { opacité : 1 ; >
100 % { opacité : 0 ; >
>
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!