Maison > Article > interface Web > Comment utiliser les propriétés d'animation CSS3
Collecter pour tout le monde les règles des @keyframes et tous les animations attributs Nous savons tous que @keyframes signifie stipuler une animation Voici un cas pratique, pour vous aider. tout le monde comprend, jetons un oeil.
Description de la propriété CSS
@keyframes Spécifie l'animation.
animation Propriété raccourcie pour toutes les propriétés d'animation, à l'exception de la propriété animation-play-state.
animation-name spécifie le nom de l'animation @keyframes.
animation-duration spécifie les secondes ou millisecondes nécessaires à l'animation pour terminer un cycle. La valeur par défaut est 0.
count spécifie le nombre de fois que l'animation est jouée. La valeur par défaut est 1.
Il précise si l'animation est jouée au cycle suivant dans le cycle suivant. La valeur par défaut est "normale". animation-play-state précise si l'animation est en cours d'exécution ou en pause. La valeur par défaut est "en cours d'exécution".
Les deux exemples suivants définissent toutes les propriétés d'animation :
OperaSafari
ChromeFirefoxInternet ExplorerInstance
Exécuter ma première animation et définir toutes Attributs :
div
{ animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; /* Safari and Chrome: */ -webkit-animation-name: myfirst; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; }
Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour un contenu plus passionnant, veuillez faire attention au php. Site Web 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!