Tutoriel sur l'utilisation de l'attribut d'animation pour implémenter une exécution différée entre les boucles-tutoriel CSS-php.cn

Tutoriel sur l'utilisation de l'attribut d'animation pour implémenter une exécution différée entre les boucles

零下一度

Libérer： 2017-05-18 14:37:38

original

3457 Les gens l'ont consulté

Présentez d'abord la définition et l'utilisation de l'animation

L'attribut d'animation est un attribut abrégé, utilisé pour définir six attributs d'animation :

    animation-name
    animation-duration
    animation-timing-function
    animation-delay
    animation-iteration-count
    animation-direction

Copier après la connexion

Valeur par défaut : aucun 0 facilité 0 1 normal

Remarque : Veuillez toujours spécifier l'attribut animation-duration, sinon la durée sera de 0 et l'animation ne sera pas jouée.

Syntaxe

 animation: name duration timing-function delay iteration-count direction;

Copier après la connexion

animation-name spécifie le nom de l'image clé qui doit être lié au sélecteur. .

animation-duration Spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes.

animation-timing-function spécifie la courbe de vitesse de l'animation.

animation-delay Spécifie le délai avant le démarrage de l'animation.

animation-iteration-count Spécifie le nombre de fois que l'animation doit être jouée. (Valeur : n fois, boucle infinie)

animation-direction Spécifie si l'animation doit être jouée à l'envers à tour de rôle.

Résumé :

Sur la base des attributs ci-dessus, il vous suffit de définir le délai d'animation et le nombre d'itérations d'animation en fonction de la situation spécifique.

Par exemple :

p
{
animation:mymove 5s 5s infinite;
-webkit-animation:mymove 5s 5s infinite; /* Safari 和 Chrome */
}

Copier après la connexion

Exemple de solution :

<!doctype html><html lang="en"><head>
 <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .item1{
         list-style: none;
         -webkit-animation: revolving 4s 0s infinite;
         animation: revolving 4s 0s infinite;
        }
        @-webkit-keyframes revolving{
         0,75%{
        -webkit-transform: perspective(700px) rotateX(90deg);
         }
         87.5%{
        -webkit-transform: perspective(700px) rotateX(0deg);
         }
         100%{
        -webkit-transform: perspective(700px) rotateX(-90deg);
         }
        }
    </style>
</head>
    <body>
        <ul>
            <li class="item1">梅西与美洲杯失之交臂</li>
        </ul>
    </body>
</html>

Copier après la connexion

Définissez l'animation totale sur 4 secondes, puis les premiers 75 % sont de 3 secondes . Changement (0-75 %), les 25 % suivants ne durent qu'une seconde à animer.

[Recommandations associées]

1. Introduction détaillée à la propriété animation-direction en CSS3

2. Doit maîtriser l'animation CSS3 ( Animation ) : les 8 attributs majeurs

3 Partagez un exemple de surveillance de l'événement de fin d'animation CSS3 (animation)

4.Détaillé. explication de deux types de pauses en méthode CSS3 (transition, animation)

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!