Comment définir le délai de l'animation CSS3 pendant quelques secondes-Questions et réponses frontales-php.cn

Comment définir le délai de l'animation CSS3 pendant quelques secondes

WBOY

Libérer： 2022-03-16 11:35:03

original

9663 Les gens l'ont consulté

En CSS3, vous pouvez utiliser l'attribut "animation-delay" pour définir le délai d'animation de quelques secondes. La fonction de cet attribut est de définir le moment où l'animation démarre. L'unité de la valeur de l'attribut peut être la seconde "s". ou millisecondes "ms". La syntaxe est "animation-delay: time;".

Comment définir le délai de l'animation CSS3 pendant quelques secondes

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment définir le délai de quelques secondes pour une animation CSS3 ?

L'attribut animation-delay définit le moment où l'animation démarre.

L'unité de valeur du délai d'animation peut être des secondes (s) ou des millisecondes (ms).

Conseils : les valeurs négatives sont autorisées, -2s fait démarrer l'animation immédiatement, mais saute 2 secondes pour entrer dans l'animation.

Syntaxe

animation-delay: time;

Copier après la connexion

time est facultative. Définit le temps, en secondes ou millisecondes, à attendre avant le démarrage de l'animation. La valeur par défaut est 0

L'exemple est le suivant ;

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    animation-delay:3s;
    /*Safari 和 Chrome*/
    -webkit-animation:mymove 5s infinite;
    -webkit-animation-delay:3s;
}
@keyframes mymove
{
    from {left:0px;}
    to {left:200px;}
}
@-webkit-keyframes mymove /*Safari 和 Chrome*/
{
    from {left:0px;}
    to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注意:</strong>animation-delay 属性不兼容 Internet Explorer 9以及更早版本的浏览器。</p>
<div></div>
</body>
</html>

Copier après la connexion

L'animation du résultat de sortie est retardée de 3 secondes, et le résultat est le suivant :

Comment définir le délai de lanimation CSS3 pendant quelques secondes