CSS3动画
制作一个CSS3动画需要2步
- 声明CSS3@keyframes规则
- @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式
- 利用百分比来规定变化发生的时间，或用关键词from和to,等同于0%和100%
- 0%是动画的开始，100%是动画的结束
- 为了得到浏览器的最佳支持，应该始终定义0%和100%
- 将CSS3@keyframes规则绑定到指定的选择器上，使用animation设定动画属性
- animation是简写属性
- animation-name即是动画关键帧名字
- animation-dration即是动画持续时间
- animation-timing-function即是动画过渡函数 属性值有：linear/ease/ease-in/ease-out/ease-in-out
- animation-delay即是延迟时间
- animation-iteration-count即是动画执行次数 对于属性值：infinite 即是无限循环
- animation-direction即是动画执行方向 属性值normal为正常，alternate为反向播放*/
简单的动画实例
- loding加载动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <style typ="text/css">
.container {
width:15px;
margin:60px auto;
position:relative;
}
.container div {
position:absolute;
top:0px;
left:0px;
width:150px;
height:150px;
border-radius:50%;
background-color:lightskyblue;
animation:chars 2s infinite;
}
.container>div:nth-child(1) {
animation-delay:-1s;
opacity:0.8
}
@keyframes chars {
0% , 100% {transform:scale(0.0);}
50% {transform:scale(0.8);}
}
</style>
</head>
<body>
<div class="container">
<div ></div>
<div></div>
</div>
</body>
|
loding效果
- 矩形移动动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <style typ="text/css">
.container {
width:150px;
height:150px;
background-color:lightskyblue;
margin:10px;
position:absolute;
animation: chara 2s infinite;
}
@keyframes chara {
0% {top:0; left:20%;}
25% {top:0; left:80%;}
50% {top:60%; left:80%;}
75% {top:60%; left:20%;}
100% {top:0; left:20%;}
}
/*animation全部属性：
animation-name即是动画关键帧名字
animation-dration即是动画持续时间
animation-timing-function即是动画过渡函数 属性值有：linear/ease/ease-in/ease-out/ease-in-out
animation-delay即是延迟时间
animation-iteration-count即是动画执行次数 对于属性值：infinite 即是无限循环
animation-direction即是动画执行方向 属性值normal为正常，alternate为反向播放*/
</style>
</head>
<body>
<div class="container">
</div>
</body>
|
效果
