1. 通过CSS3, 我们能够创建动画, 这可以在许多网页中取代动画图片、Flash动画以及JavaScript。
2. CSS3动画属性
3. @keyframes规则
3.1. 通过@keyframes规则, 您能够创建动画。
3.2. 创建动画的原理是, 将一套CSS样式逐渐变化为另一套样式。
3.3. 在动画过程中, 您能够多次改变这套CSS样式。
3.4. 以百分比来规定改变发生的时间, 或者通过关键词"from"和"to", 等价于0%和100%。
3.5. 0%是动画的开始时间, 100%动画的结束时间。
3.6. 为了获得最佳的浏览器支持, 您应该始终定义0%和100%选择器。
3.7. 请使用动画属性来控制动画的外观, 同时将动画与选择器绑定。
3.8. 您必须定义动画的名称和时长。如果忽略时长, 则动画不会允许, 因为默认值是0。
3.9. 必须值
3.10. 实例
@keyframes mymove
{
0% {
top: 0px;
}
25% {
top: 200px;
}
50% {
top: 100px;
}
75% {
top: 200px;
}
100% {
top: 0px;
}
}
4. animation属性
4.1. animation 属性是一个简写属性, 用于设置八个动画属性:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-play-state
- animation-fill-mode
4.2. 请始终规定animation-duration属性, 否则时长为0, 就不会播放动画了。
4.3. 默认值
4.4. 可能值
5. animation-name属性
5.1. animation-name属性为@keyframes动画规定名称。
5.2. 默认值
5.3. 可能值
6. animation-duration属性
6.1. animation-duration属性定义动画完成一个周期所需要的时间, 以秒或毫秒计。
6.2. 默认值
6.3. 可能值
7. animation-timing-function属性
7.1. animation-timing-function规定动画的速度曲线。
7.2. 速度曲线定义动画从一套CSS样式变为另一套所用的时间。
7.3. 速度曲线用于使变化更为平滑。
7.4. 默认值
7.5. animation-timing-function使用名为三次贝塞尔(Cubic Bezier)函数的数学函数, 来生成速度曲线。您能够在该函数中使用自己的值, 也可以预定义的值:
7.6. 实例
#div1 {
animation-timing-function: linear;
}
#div2 {
animation-timing-function: ease;
}
#div3 {
animation-timing-function: ease-in;
}
#div4 {
animation-timing-function: ease-out;
}
#div5 {
animation-timing-function: ease-in-out;
}
7.7. cubic-bezier实例
#div1 {
animation-timing-function: cubic-bezier(0,0,1,1);
}
#div2 {
animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
}
#div3 {
animation-timing-function: cubic-bezier(0.42,0,1,1);
}
#div4 {
animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {
animation-timing-function: cubic-bezier(0.42,0,0.58,1);
}
8. animation-delay属性
8.1. animation-delay属性定义动画何时开始。
8.2. animation-delay值以秒或毫秒计。
8.3. 允许负值, -2s使动画马上开始, 但跳过2秒进入动画。
8.4. 默认值
8.5. 可能值
9. animation-iteration-count属性
9.1. animation-iteration-count属性定义动画的播放次数。
9.2. 默认值
9.3. 可能值
10. animation-direction属性
10.1. animation-direction属性定义是否应该轮流反向播放动画。
10.2. 如果animation-direction值是"alternate", 则动画会在奇数次数(1、3、5 等等)正常播放, 而在偶数次数(2、4、6 等等)向后播放。
10.3. 如果把动画设置为只播放一次, 则该属性没有效果。
10.4. 默认值
10.5. 可能值
11. animation-play-state属性
11.1. animation-play-state属性规定动画正在运行还是暂停。
11.2. 默认值
11.3. 可能值
12. animation-fill-mode属性
12.1. animation-fill-mode属性规定动画在播放之前或之后, 其动画效果是否可见。
12.2. 其属性值是由逗号分隔的一个或多个填充模式关键词。
12.3. 默认值
12.4. 可能值
13. 例子
13.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3动画</title>
<style type="text/css">
div {
margin: 20px;
}
#div1 {
width: 100px;
height: 100px;
background: pink;
float: left;
animation-name: myfirst;
animation-duration: 10s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 3;
animation-direction: normal;
animation-play-state: running;
animation-fill-mode: backwards;
}
#div2 {
width: 100px;
height: 100px;
background: pink;
float: left;
animation: myfirst 10s ease 1s 3 alternate running forwards;
}
#div3 {
width: 100px;
height: 100px;
background: pink;
float: left;
animation: myfirst 10s ease-in 1s 2 alternate running both;
}
@keyframes myfirst {
0% {
background: red;
}
25% {
background: yellow;
}
50% {
background: blue;
}
75% {
background: green;
}
100% {
background: #00FF00;
}
}
</style>
</head>
<body>
<div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div>
</body>
</html>
13.2. 效果图