Maison >interface Web >tutoriel CSS >Comment utiliser l'attribut d'animation ? Explication détaillée de l'attribut d'animation
Comment utiliser l'attribut d'animation ? Explication détaillée de l'attribut d'animation
- 云罗郡主avant
- 2018-11-20 17:01:414572parcourir
Le contenu de cet article explique comment utiliser l'attribut d'animation ? Une explication détaillée de l'attribut d'animation a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Attribut animation-duration
En CSS3, nous pouvons utiliser l'attribut animation-duration pour définir la durée de l'animation, qui est le temps total nécessaire pour la terminer de 0% à 100% . La propriété animation-duration est similaire à la propriété transition-duration dans les transitions CSS3.
Syntaxe :
animation-duration:时间；
Description :
La valeur de l'attribut animation-duration est une heure, l'unité est s (seconde), elle peut être une décimale telle que 0,5 s.
Exemple :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 animation-duration属性</title>
<style type="text/css">
@-webkit-keyframes mytranslate
{
0%{}
100%{-webkit-transform:translateX(100px);}
}
div:not(#container)
{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
-webkit-animation-name:mytranslate;
-webkit-animation-timing-function:linear;
}
#container
{
display:inline-block;
width:140px;
border:1px solid silver;
}
#div1{-webkit-animation-duration:2s;margin-bottom:10px;}
#div2{-webkit-animation-duration:4s;}
</style>
</head>
<body>
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>L'effet est le suivant :
Analyse :
Dans cet exemple, nous définissons # La durée d'animation de l'élément de div1 est de 2s, et la durée d'animation de l'élément de #div2 est fixée à 4s. Grâce aux tests en ligne, nous pouvons clairement voir l’effet.
Permettez-moi de dire ici que les animations CSS3 sont souvent combinées avec des transformations CSS3 pour obtenir des effets d'animation magnifiques et complexes.
Ce qui précède est une introduction complète à la façon d'utiliser l'attribut animation ? Une explication détaillée de l'attribut animation. Si vous souhaitez en savoir plus sur le Tutoriel CSS3, veuillez prêter attention au. Site Web PHP chinois.
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!