css3常用动画+动画库
transition
CSS过渡
介绍
俗称“过渡”，是指某元素从一种样式逐渐转变为另一种样式的过程。即用于转换元素两个不同的状态，这个转换过程（或者说触发过程）可以是伪类比如:hover, :active 或者是通过 javascript 动态设定。IE10+支持
transitionz是简写，主要包含的是一下属性。
用法
必须规定了两个属性
- 要添加过渡效果的属性
- 效果转换的持续时间
- 多个属性转换用逗号隔开
例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<div id="zi"></div>
#zi{
height:100px;
width: 100px;
background-color: yellow;
transition: width 2s,height 2s,color 2s;
-webkit-transition: width 2s,height 2s,background-color 2s;
-o-transition: width 2s,height 2s,background-color 2s;
-moz-transition: width 2s,height 2s,background-color 2s;
}
#zi:hover{
background-color: red;
height: 150px;
width: 200px;
}
|
animation
CSS动画
介绍
animation属性结合@keyframes规则,能创建由当前样式逐渐改为新样式的动画效果。
Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
用法
@keyframes创建动画并制定动画的名字（随便起，主要是用来给animation选择），animation中选择相应的动画名字来使用对应的动画，还要设置动画执行的持续时间，还可设置所选动画的执行方式。即：
- @keyframes
- 用于创建动画
- 用法：
- 规定动画名，内容为from某种样式to某种样式，还要设置不同浏览器的前缀。也可以不用from-to而是直接用百分比来划分时间，进而规定特定时间内的动画样式。 “from” 和 “to”，等同于 0% 和 100%，0% 是动画的开始，100% 是动画的完成
- 例1：
- 例2：
- animation
- 用于选择动画并规定动画的执行方式
- 用法：
- 必须固定的有动画名称和动画时长
- 另外还可以添加其他规定项：
例子
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| <!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;/*表示变换速度，linear表示从头到尾匀速*/
animation-delay:2s;
animation-iteration-count:infinite;/*表示动画无限次循环，可改为常数来规定执行次数*/
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}
@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;}
}
@-moz-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;}
}
@-webkit-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;}
}
@-o-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;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>
|
也可以将animation简写成：
animation：动画名称 持续时间 执行速度变化 动画延迟 循环次数 是否下一周期逆向播放
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}