What is CSS3 animation?
Animation element is the gradual change from one style to another style effect.
You can change as many styles as many times.
A. Change the color of the background animation
Examples are as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@keyframes myfirst
{
0% {background: red;}
20%{background: blue;}
50%{background: purple;}
100% {background: yellow;}
}
.test1{width: 300px;
height: 300px;
background: black;
animation: myfirst 6s;
}
</style>
</head>
<body>
<div class="test1">
</div>
</body>
</html>
A percentage change of the predetermined time, or with keyword "from" and "to", equivalent to 0% and 100%.
Where 0% represents the beginning of the animation, it is 100% completed on behalf of animation, stop.
Note: You must define the name and duration of the animation. Long, the movie will not be allowed if ignored, because the default value is 0.
II. Change position
Animation not only change the background color, you can change its position.
E.g:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@keyframes myfirst{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:2s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Three @ keyframes rules and all the animation properties:
@keyframes ：规定动画。
animation ：所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name ：规定 @keyframes 动画的名称。
animation-duration ：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function ：规定动画的速度曲线。默认是 "ease"。
animation-delay ：规定动画何时开始。默认是 0。
animation-iteration-count ： 规定动画被播放的次数。默认是 1。
animation-direction ： 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state ：规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode ：规定对象动画时间之外的状态。