How to implement animation properties in css (with code)

The content of this article is about the implementation method of animation properties in CSS (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. CSS animation properties can gradually change from one value to another, such as size, quantity, percentage, position and color.

2. Implementation method:

1. Define animation (slideOut is the custom animation name)

@-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. Call 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. The properties used for animation include 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., basically all elements.

Related recommendations:

CSS animation of Transition_html/css_WEB-ITnose

##css animation production——CSS animate

The above is the detailed content of How to implement animation properties in css (with code). For more information, please follow other related articles on the PHP Chinese website!