How to use animation property in css3

There are six attributes of animation animation in css3, which are animation name, time required to complete animation, speed, delay, playback speed and whether there is reverse playback. This article will share with you in detail The animation attribute method in CSS3 has certain reference value. I hope it will be helpful to everyone.

CSS is mainly used to describe the style and layout of web pages, and CSS3 is the latest CSS standard. It provides more methods and using CSS3, you can create animations to make web page content richer. Today I will share css3 with you. Animation attribute in - animation

Pay attention to browser compatibility issues during use

Internet Explorer 10, Firefox and Opera support the animation attribute.

Safari and Chrome support the -webkit-animation attribute

So browser compatibility issues should be taken into consideration when writing programs

animation attribute

Used to set six animation properties:

(1) animation-name: Specifies the name of the animation.

animation-name:demo//Internet Explorer 10、Firefox 以及 Opera 浏览器中
-webkit-animation-name:demo//Safari 和 Chrome

(2) animation-duration: The time it takes to complete the animation (in seconds and milliseconds)

animation-duration：3s；
-webkit-animation-duration:3s;

(3) animation-timing-function: Animation speed curve

linear: Play at a constant speed

ease: The animation speed is slow at the beginning and then speeds up and slows down at the end (default)

ease-in: means the animation starts at a low speed

ease-out: Refers to the animation ending at a low speed.

ease-in-out: The animation starts and ends at a low speed

cubic-bezier(n,n,n,n): Set the desired value in the cubic-bezier function, yes Value from 0 to 1

animation-timing-function：ease；
-webkit-animation-timing-function:ease;

(4) animation-delay: animation start delay time

animation-delay：3s；
-webkit-animation-delay:3s;

(5) animation-iteration-count: the number of times the animation is played

n: The value of the number of times the custom animation is played

infinite: refers to the infinite loop playback of the animation

animation-iteration-count：4；//循环四次
-webkit-animation-iteration-count:infinite;//循环无数次

(6) animation-direction: whether the animation is played in reverse in turn

normal The animation should play normally (default)

alternate The animation should play in reverse in turn

animation-direction：normal;
-webkit-animation-direction:alternate;

Let a small square move in the direction of lower right and upper left

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:demo;
animation-iteration-count：infinite;
animation-duration:2s;
animation-timing-function:ease;
animation-delay:0.1s;
animation-direction: alternate; 
｝
/* Safari and Chrome 浏览器*/
-webkit-animation:demo;/*设置动画名称*/
-webkit-animation-iteration-count：infinite;/*动画执行次数*/
-webkit-animation-duration:5s;/*动画花费时间*/
-webkit-animation-timing-function:ease;/*动画速度*/
-webkit-animation-delay:2s;/*动画延迟*/
-webkit-animation-direction: alternate; /*动画是否反向*/
}
/*设置动画运行区域*/
@keyframes demo
{
	0% {background-color: pink;left:0;top:40px;}
	25%{background-color: hotpink;left:300px;top:40px;}
	50%{background-color: yellow;left:300px;top:340px;}
	75%{background-color: blue;left:0;top:340px;}
	100%{background-color: green;left:0;top:30px;}
}
/*Safari and Chrome浏览器*/
@-webkit-keyframes demo
{
    0% {background-color: pink;left:0;top:40px;}
	25%{background-color: hotpink;left:300px;top:40px;}
	50%{background-color: yellow;left:300px;top:340px;}
	75%{background-color: blue;left:0;top:340px;}
	100%{background-color: green;left:0;top:30px;}
}
</style>

Rendering:

Summary: The above is the content of this article. I hope everyone can understand the animation in CSS3 through this article

The above is the detailed content of How to use animation property in css3. For more information, please follow other related articles on the PHP Chinese website!