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

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

零下一度original: 2017-05-18 14:37:383420parcourir

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

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;

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 */
}

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des deux méthodes de pause (transition, animation) en CSS3Article suivant：Explication détaillée des deux méthodes de pause (transition, animation) en CSS3

Articles Liés

Voir plus