Quelles propriétés possède l'animation CSS3 ?

Les attributs d'animation CSS3 incluent : "@keyframes", animation, nom d'animation, durée d'animation, délai d'animation, direction d'animation, etc.

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

Attributs d'animation CSS3 :

• @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.

• animation-timing-function spécifie la courbe de vitesse de l'animation. La valeur par défaut est « facilité ».

• animation-delay spécifie quand l'animation démarre. La valeur par défaut est 0.

• animation-iteration-count spécifie le nombre de fois que l'animation est jouée. La valeur par défaut est 1.

• animation-direction précise si l'animation est jouée à l'envers lors du 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".

• animation-fill-mode spécifie l'état en dehors du temps d'animation de l'objet.

Exemple : Utilisez les attributs d'animation CSS3 pour créer des animations simples

body { background-color: #fff; color: #555; font-size: 1.1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .container { margin: 50px auto; min-width: 320px; max-width: 500px; } .element { margin: 0 auto; width: 100px; height: 100px; background-color: #0099cc; border-radius: 50%; position: relative; top: 0; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; } @-webkit-keyframes bounce { from { top: 100px; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { top: 50px; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50% { top: 150px; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { top: 75px; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { top: 100px; } } @keyframes bounce { from { top: 100px; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { top: 50px; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50% { top: 150px; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { top: 75px; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { top: 100px; } }

Effet de course

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!