css3之动画(animation)

目录
  1. 简介
  2. 兼容性
  3. 动画属性
  4. 关键帧（@keyframes）
    1. @keyframes的兼容性
  5. 动画的使用
  6. 全屏slidershow效果

简介

transition与animation的区别：
transition是只能指定属性的初始状态和结束状态，然后在这两个状态中实现平滑的过渡；
animation是通过先通过关键帧来声明一个动画，然后调用，可以实现更为复杂的动画效果。

兼容性

chrome IE opera safari firefox
4.0+ 10+ 12+ 4+ 5.0+

当然虽然支持很好，但是在使用的时候还是要加上浏览器的前缀。

动画属性

1
@keyframes

通过以上的属性创建一个动画。
属性：

1
animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode

八个子属性详解：
1.animation-name：动画名称，对应一个@keyframes规则。
2.animation-duration
3.animation-timing-function：同transition的。略。
4.animation-delay
以上四个基本和transition的一样。可以略。下面是新的属性，重点介绍。
5.animation-iteration-count：动画播放的次数。默认是一次。
6.animation-direction：动画播放的方向。
取值：

  • normal：动画的每次循环都是向前播放；
  • alternate：偶数次向前播放，奇数次反方向。
    7.animation-play-state：控制播放状态。
    取值：
  • running
  • paused
    8.animation-fill-mode:定义在动画之前和结束之后发生的操作。
    取值：
  • none:
  • forwards：动画结束后继续应用最后帧的位置。
  • backwards：动画结束后继续应用开始帧的位置。
  • both

关键帧（@keyframes）

语法如下：

1
2
3
4
5
6
7
8
9
10
11
@keyframes animation-name{
	from/(0%){
		<!-- css样式 -->
	}
	百分数{
		<!-- css样式 -->
	}
	to/(100%){
	<!-- css样式 -->
	}
}

@keyframes的兼容性

chrome IE opera safari firefox
4.0+ 10+ 12+ 4+ 5.0+

动画的使用

1.第一步：声明一个动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@keyframes wobble{
	0%{
	margin-left:100px;
	background:green;
	}
	40%{
	margin-left:150px;
	background:orange;
	}
	60%{
	margin-left:75px;
	background:blue;
	}
	100%{
	margin-left:100px;
	background:red;
	}
<!-- 省略
@-moz-keyframes
@-webkit-keyframes
@-o-keyframes -->
}

假设动画执行的时间是10s，则如图是动画的执行示意图。
动画示意图

2.动画的调用

1
2
3
4
5
6
.demo{
	margin-left:100px;
	background:blue;
	-webkit-animation:wobble .2s ease-in;
	animation:wobble .2s ease-in;
}

全屏slidershow效果

查看demo
1.五种动画的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@keyframes 'slideleft'{
	0%{margin-left: -500px;}
	100%{margin-left: 0;}
}
@keyframes 'slidebottom'{
	0%{margin-top:350px;}
	100%{margin-top: 0;}
}
@keyframes 'zoomin'{
	0%{transform:scale(0.1);}
	100%{transform:none;}
}
@keyframes 'zoomout'{
	0%{transform:scale(2);}
	100%{transform:none;}
}
@keyframes 'rotate'{
	0%{transform:rotate(-360deg) scale(0.1);}
	100%{transform:none;}
}

2.before和after伪类的使用。
3.target的使用
4.not的使用：目的的为了取消未点击图片的动画。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@-webkit-keyframes 'notTarget' {
	0% { z-index: 75; }
	100% { z-index: 75; }
}
@-moz-keyframes 'notTarget' {
	0% { z-index: 75; }
	100% { z-index: 75; }
}
@-ms-keyframes 'notTarget' {
	0% { z-index: 75; }
	100% { z-index: 75; }
}
@-o-keyframes 'notTarget' {
	0% { z-index: 75; }
	100% { z-index: 75; }
}
@keyframes 'notTarget' {
	0% { z-index: 75; }
	100% { z-index: 75; }
}

.bg:not(:target) {
	xxx;
}

5:reset.css的使用
点击查看