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

Table des matières

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

Maison

interface Web

Questions et réponses frontales

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

Mar 16, 2022 am 11:35 AM

css

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

(Partage vidéo d'apprentissage : Tutoriel vidéo 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!

Déclaration de ce site Web

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