Comment implémenter les propriétés d'animation en CSS (avec code)

Le contenu de cet article concerne la méthode d'implémentation des attributs d'animation en CSS (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Les propriétés d'animation CSS peuvent changer progressivement d'une valeur à une autre, comme la taille, la quantité, le pourcentage, la position et la couleur.

2. Méthode de mise en œuvre :

1. Définir l'animation (slideOut est le nom de l'animation personnalisée)

@-webkit-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-moz-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-o-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-ms-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}

2. Appeler l'animation

-webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards;
	-moz-animation: slideOut 0.5s ease-in-out 0.3s backwards;
	-o-animation: slideOut 0.5s ease-in-out 0.3s backwards;
	-ms-animation: slideOut 0.5s ease-in-out 0.3s backwards;
	animation: slideOut 0.5s ease-in-out 0.3s backwards;

3. Les propriétés utilisées dans l'animation incluent background/border/border/box-shadow/clip/color/column/filter/flex/font/letter-spacing/line-height/margin/opacity/outline/perspective/text/vertical. -align/visibility/word-spacing/z-index, etc., essentiellement tous les éléments.

Recommandations associées :

Animation CSS - Transition_html/css_WEB-ITnose

production d'animation CSS - Animation 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!