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.

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

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

Chr

omeFirefoxInternet 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

Autres

articles connexes ! Lecture connexe :

Étapes pour obtenir un effet de suspension 3D en HTML

Comment créer des effets de particules de feux d'artifice à l'aide de H5

Comment changer le style de survol de la souris sans utiliser 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!