您的位置:时时app平台注册网站 > web前端 > 编写自己的代码库:CSS3 常用动画的实现彩世界网

编写自己的代码库:CSS3 常用动画的实现彩世界网

2019-10-12 18:30

2-2-2.颜色上下划线变化

这里也是一大块一同说,看代码只怕会更乱,所以大家看代码的时候要特别在乎注意。看代码看不晓得,直接在github下载,然后运行文件,边调节和测量检验边看功用!那样大家就很轻便驾驭了!

彩世界网址 1

html

JavaScript

<span class="ech-overline-l">overline-l</span> <span class="ech-overline-r">overline-r</span> <span class="ech-underline-l">underline-l</span> <span class="ech-underline-r">underline-r</span> <span class="ech-underline-c">underline-c</span> <span class="ech-underline-c-out">underline-c-out</span> <span class="ech-overline-c">overline-c</span> <span class="ech-overline-c-out">overline-c-out</span>

1
2
3
4
5
6
7
8
<span class="ech-overline-l">overline-l</span>
<span class="ech-overline-r">overline-r</span>
<span class="ech-underline-l">underline-l</span>
<span class="ech-underline-r">underline-r</span>
<span class="ech-underline-c">underline-c</span>
<span class="ech-underline-c-out">underline-c-out</span>
<span class="ech-overline-c">overline-c</span>
<span class="ech-overline-c-out">overline-c-out</span>

css

/*上写道和下划线变化 当前因素样式设置相对稳固*/ .ech-overline-r, .ech-overline-l, .ech-underline-r, .ech-underline-l, .ech-underline-c, .ech-overline-c, .ech-underline-c-out, .ech-overline-c-out{ position: relative; transition: all .3s; z-index: 1; } /*开首化:after:before大小和相对定位*/ .ech-overline-r:before, .ech-overline-l:before, .ech-underline-l:before, .ech-underline-r:before, .ech-underline-c:before, .ech-overline-c:before, .ech-underline-c:after, .ech-overline-c:after, .ech-underline-c-out:before, .ech-overline-c-out:before { position: absolute; transition: all .3s; content: ""; display: block; background: #09f; z-index: -1; height: 4px; width: 100%; transform: scaleX(0); } /*上涂鸦 左右出去*/ .ech-overline-r:before { top: 0; left: 0; transform-origin: 100% 50%; } .ech-overline-l:before { top: 0; right: 0; transform-origin: 0 50%; } /*下划线 左右出去*/ .ech-underline-r:before { bottom: 0; left: 0; transform-origin: 100% 50%; } .ech-underline-l:before { bottom: 0; right: 0; transform-origin: 0% 50%; } /**上涂鸦 下划线 居中跻身**/ .ech-overline-c:before { top: 0; transform-origin: 0 50%; } .ech-overline-c:after { top: 0; transform-origin: 100% 50%; } .ech-underline-c:before { bottom: 0; transform-origin: 0 50%; } .ech-underline-c:after { bottom: 0; transform-origin: 100% 50%; } .ech-overline-c:before, .ech-underline-c:before { left: 0; } .ech-overline-c:after, .ech-underline-c:after { right: 0; } /*上写道 下划线-居中出来 */ .ech-overline-c-out:before { top: 0; left: 0; right: 0; margin: auto; } .ech-underline-c-out:before { bottom: 0; left: 0; right: 0; margin: auto; } /*hover效果*/ .ech-overline-c:hover:after, .ech-overline-c:hover:before, .ech-underline-c:hover:after, .ech-underline-c:hover:before { transform: scaleX(.51); } .ech-overline-l:hover:before, .ech-overline-r:hover:before, .ech-underline-l:hover:before, .ech-underline-r:hover:before, .ech-underline-c-out:hover:before, .ech-overline-c-out:hover:before { transform: scaleX(1); }

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
89
90
91
92
93
94
95
96
97
/*上划线和下划线变化 当前元素样式设置相对定位*/
.ech-overline-r, .ech-overline-l, .ech-underline-r, .ech-underline-l, .ech-underline-c, .ech-overline-c, .ech-underline-c-out, .ech-overline-c-out{
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*初始化:after:before大小和绝对定位*/
.ech-overline-r:before, .ech-overline-l:before, .ech-underline-l:before, .ech-underline-r:before, .ech-underline-c:before, .ech-overline-c:before, .ech-underline-c:after, .ech-overline-c:after, .ech-underline-c-out:before, .ech-overline-c-out:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    height: 4px;
    width: 100%;
    transform: scaleX(0);
}
 
/*上划线 左右出来*/
.ech-overline-r:before {
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
}
 
.ech-overline-l:before {
    top: 0;
    right: 0;
    transform-origin: 0 50%;
}
 
/*下划线 左右出来*/
.ech-underline-r:before {
    bottom: 0;
    left: 0;
    transform-origin: 100% 50%;
 
}
 
.ech-underline-l:before {
    bottom: 0;
    right: 0;
    transform-origin: 0% 50%;
}
 
/**上划线 下划线 居中进来**/
.ech-overline-c:before {
    top: 0;
    transform-origin: 0 50%;
}
 
.ech-overline-c:after {
    top: 0;
    transform-origin: 100% 50%;
}
 
.ech-underline-c:before {
    bottom: 0;
    transform-origin: 0 50%;
}
 
.ech-underline-c:after {
    bottom: 0;
    transform-origin: 100% 50%;
}
 
.ech-overline-c:before, .ech-underline-c:before {
    left: 0;
}
 
.ech-overline-c:after, .ech-underline-c:after {
    right: 0;
}
 
/*上划线 下划线-居中出去 */
.ech-overline-c-out:before {
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}
 
.ech-underline-c-out:before {
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
/*hover效果*/
.ech-overline-c:hover:after, .ech-overline-c:hover:before, .ech-underline-c:hover:after, .ech-underline-c:hover:before {
    transform: scaleX(.51);
}
 
.ech-overline-l:hover:before, .ech-overline-r:hover:before, .ech-underline-l:hover:before, .ech-underline-r:hover:before, .ech-underline-c-out:hover:before, .ech-overline-c-out:hover:before {
    transform: scaleX(1);
}
none 定义不进行转换。  
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。  
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。  
translate(x,y) 定义 2D 转换。  
translate3d(x,y,z) 定义 3D 转换。  
translateX(x) 定义转换,只是用 X 轴的值。  
translateY(y) 定义转换,只是用 Y 轴的值。  
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。  
scale(x,y) 定义 2D 缩放转换。  
scale3d(x,y,z) 定义 3D 缩放转换。  
scaleX(x) 通过设置 X 轴的值来定义缩放转换。  
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。  
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。  
rotate(angle) 定义 2D 旋转,在参数中规定角度。  
rotate3d(x,y,z,angle) 定义 3D 旋转。  
rotateX(angle) 定义沿着 X 轴的 3D 旋转。  
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。  
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。  
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。  
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。  
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。  
perspective(n) 为 3D 转换元素定义透视视图。  

<a href="#" class="button bubble-top">Bubble Top</a>
<a href="#" class="button bubble-right">Bubble Right</a>
<a href="#" class="button bubble-bottom">Bubble Bottom</a>
<a href="#" class="button bubble-left">Bubble Left</a>
<a href="#" class="button bubble-float-top">Bubble Float Top</a>
<a href="#" class="button bubble-float-right">Bubble Float Right</a>
<a href="#" class="button bubble-float-bottom">Bubble Float Bottom</a>
<a href="#" class="button bubble-float-left">Bubble Float Left</a>

2-3-3摇晃效果

彩世界网址 2

html

JavaScript

<span class="ech-wobble-c">wobble-c</span> <span class="ech-wobble-t">wobble-t</span> <span class="ech-wobble-b">wobble-b</span>

1
2
3
<span class="ech-wobble-c">wobble-c</span>
<span class="ech-wobble-t">wobble-t</span>
<span class="ech-wobble-b">wobble-b</span>

css

.ech-wobble-t, .ech-skew-r-t, .ech-skew-l-t { transform-origin: 0 100%; } .ech-wobble-b, .ech-skew-r-b, .ech-skew-l-b { transform-origin: 100% 0; } .ech-wobble-c:hover, .ech-wobble-t:hover,.ech-wobble-b:hover { animation: wobble-x 1s ease-in-out; } @keyframes wobble-x { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } }

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
.ech-wobble-t, .ech-skew-r-t, .ech-skew-l-t {
    transform-origin: 0 100%;
}
 
.ech-wobble-b, .ech-skew-r-b, .ech-skew-l-b {
    transform-origin: 100% 0;
}
 
.ech-wobble-c:hover, .ech-wobble-t:hover,.ech-wobble-b:hover {
    animation: wobble-x 1s ease-in-out;
}
@keyframes wobble-x {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

.red-flower:hover .cover{animation:red 0.8s 1 linear;z-index: 1;}
@keyframes red{
0%{opacity: 1;}
35%{transform:translate(100%,0) rotate3d(0,1,0,90deg);transform-origin:0 0; transition:0.3s ease-in-out;}
65%{transform:translate(-10%,0) rotate3d(0,1,0,90deg);transform-origin:0 0; transition:0.3s ease-in-out;}
100%{opacity: 1;}
}

100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}

2-2-1.颜色块变化

彩世界网址 3

因为那块内容很像,作者就一大块一同说,我们看代码的时候要注意注意。看代码看不掌握,直接在github下载,然后运维文件,边调节和测量检验边看效果!那样我们就很轻便掌握了!

html

JavaScript

<span class="ech-fade">fade</span> <span class="ech-fade-t">fade-t</span> <span class="ech-fade-b">fade-b</span> <span class="ech-fade-l">fade-l</span> <span class="ech-fade-r">fade-r</span> <span class="ech-bounce-t">bounce-t</span> <span class="ech-bounce-b">bounce-b</span> <span class="ech-bounce-l">bounce-l</span> <span class="ech-bounce-r">bounce-r</span> <span class="ech-fade-c-out">fade-c-out</span> <span class="ech-fade-c-in">fade-c-in</span> <span class="ech-fade-m-out">fade-m-out</span> <span class="ech-fade-m-in">fade-m-in</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
<span class="ech-fade">fade</span>
<span class="ech-fade-t">fade-t</span>
<span class="ech-fade-b">fade-b</span>
<span class="ech-fade-l">fade-l</span>
<span class="ech-fade-r">fade-r</span>
<span class="ech-bounce-t">bounce-t</span>
<span class="ech-bounce-b">bounce-b</span>
<span class="ech-bounce-l">bounce-l</span>
<span class="ech-bounce-r">bounce-r</span>
<span class="ech-fade-c-out">fade-c-out</span>
<span class="ech-fade-c-in">fade-c-in</span>
<span class="ech-fade-m-out">fade-m-out</span>
<span class="ech-fade-m-in">fade-m-in</span>

css

/*近日因素设置相对固定*/ .ech-fade, .ech-fade-t, .ech-fade-b, .ech-fade-l, .ech-fade-r, .ech-fade-c-in, .ech-fade-m-in, .ech-fade-m-out, .ech-fade-c-out, .ech-bounce-t, .ech-bounce-b, .ech-bounce-r, .ech-bounce-l { position: relative; transition: all .3s; z-index: 1; } /*脚下成分的:before和:after设置相对定位*/ .ech-fade:before, .ech-fade-t:before, .ech-fade-b:before, .ech-fade-l:before, .ech-fade-r:before, .ech-fade-c-in:before, .ech-fade-m-in:before, .ech-fade-m-out:before, .ech-fade-c-in:after, .ech-fade-m-in:after, .ech-fade-c-out:before { position: absolute; transition: all .3s; content: ""; display: block; background: #09f; z-index: -1; width: 100%; height: 100%; } /*弹跳成分:before和:after设置相对定位和移动曲线*/ .ech-bounce-t:before, .ech-bounce-b:before, .ech-bounce-r:before, .ech-bounce-l:before { transition: all .3s; transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4); position: absolute; content: ""; display: block; background: #09f; z-index: -1; width: 100%; height: 100%; } /*背景颜色和文字变化*/ .ech-fade:before { top: 0; left: 0; transform: scaleX(1); opacity: 0; } .ech-fade:hover:before { opacity: 1; } /*颜色从左至右变化*/ .ech-fade-l:before, .ech-bounce-l:before { top: 0; right: 0; transform-origin: 0 50%; transform: scaleX(0); } /*颜色从右至左变化*/ .ech-fade-r:before, .ech-bounce-r:before { top: 0; left: 0; transform-origin: 100% 50%; transform: scaleX(0); } /*颜色从上往下转移*/ .ech-fade-t:before, .ech-bounce-t:before { bottom: 0; left: 0; transform-origin: 50% 0; transform: scaleY(0); } /*颜色从下往上调换*/ .ech-fade-b:before, .ech-bounce-b:before { top: 0; left: 0; transform-origin: 50% 100%; transform: scaleY(0); } /*颜色垂直居中出去*/ .ech-fade-m-out:before { top: 0; bottom: 0; left: 0; margin: auto; transform: scaleY(0); } /*水平居中出去*/ .ech-fade-c-out:before { top: 0; right: 0; bottom: 0; left: 0; margin: auto; transform: scaleX(0); } .ech-fade-c-out:hover:before { transform: scaleX(1); } /*水平居中步向*/ .ech-fade-c-in:before { top: 0; left: 0; transform-origin: 0 50%; transform: scaleX(0); } .ech-fade-c-in:after { top: 0; right: 0; transform-origin: 100% 50%; transform: scaleX(0); } /*笔直居中走入*/ .ech-fade-m-in:before { top: 0; left: 0; transform-origin: 50% 0; transform: scaleY(0); } .ech-fade-m-in:after { bottom: 0; left: 0; transform-origin: 50% 100%; transform: scaleY(0); } /*近年来因素文字颜色变化*/ .ech-fade:hover, .ech-fade-t:hover, .ech-fade-b:hover, .ech-fade-l:hover, .ech-fade-r:hover, .ech-fade-c-in:hover, .ech-fade-m-in:hover, .ech-fade-m-out:hover, .ech-fade-c-out:hover, .ech-bounce-t:hover, .ech-bounce-b:hover, .ech-bounce-r:hover, .ech-bounce-l:hover { color: #fff; } /*笔直方向走入的:before变化(百分之五十)*/ .ech-fade-m-in:hover:before, .ech-fade-m-in:hover:after { transform: scaleY(.51); } /*笔直方向步入的:before变化*/ .ech-fade-t:hover:before, .ech-fade-b:hover:before, .ech-fade-m-out:hover:before, .ech-bounce-b:hover:before, .ech-bounce-t:hover:before { transform: scaleY(1); } /*水平方向步入的:before变化(八分之四)*/ .ech-fade-c-in:hover:before, .ech-fade-c-in:hover:after { transform: scaleX(.51); } /*水平方向步入的:before变化*/ .ech-fade-l:hover:before, .ech-fade-r:hover:before,.ech-fade-c-out:hover:before, .ech-bounce-l:hover:before, .ech-bounce-r:hover:before { transform: scaleX(1); }

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/*当前元素设置相对定位*/
.ech-fade, .ech-fade-t, .ech-fade-b, .ech-fade-l, .ech-fade-r, .ech-fade-c-in, .ech-fade-m-in, .ech-fade-m-out, .ech-fade-c-out, .ech-bounce-t, .ech-bounce-b, .ech-bounce-r, .ech-bounce-l {
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*当前元素的:before和:after设置绝对定位*/
.ech-fade:before, .ech-fade-t:before, .ech-fade-b:before, .ech-fade-l:before, .ech-fade-r:before, .ech-fade-c-in:before, .ech-fade-m-in:before, .ech-fade-m-out:before, .ech-fade-c-in:after, .ech-fade-m-in:after, .ech-fade-c-out:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
/*弹跳元素:before和:after设置绝对定位和运动曲线*/
.ech-bounce-t:before, .ech-bounce-b:before, .ech-bounce-r:before, .ech-bounce-l:before {
    transition: all .3s;
    transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
    position: absolute;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
 
/*背景颜色和文字变化*/
.ech-fade:before {
    top: 0;
    left: 0;
    transform: scaleX(1);
    opacity: 0;
}
 
.ech-fade:hover:before {
    opacity: 1;
}
 
/*颜色从左至右变化*/
.ech-fade-l:before, .ech-bounce-l:before {
    top: 0;
    right: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
/*颜色从右至左变化*/
.ech-fade-r:before, .ech-bounce-r:before {
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}
 
/*颜色从上往下变化*/
.ech-fade-t:before, .ech-bounce-t:before {
    bottom: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}
/*颜色从下往上变化*/
.ech-fade-b:before, .ech-bounce-b:before {
    top: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
 
/*颜色垂直居中出去*/
.ech-fade-m-out:before {
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleY(0);
}
 
/*水平居中出去*/
.ech-fade-c-out:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleX(0);
}
 
.ech-fade-c-out:hover:before {
    transform: scaleX(1);
}
 
/*水平居中进来*/
.ech-fade-c-in:before {
    top: 0;
    left: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
 
.ech-fade-c-in:after {
    top: 0;
    right: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}
 
/*垂直居中进来*/
.ech-fade-m-in:before {
    top: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}
 
.ech-fade-m-in:after {
    bottom: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
/*当前元素文字颜色变化*/
.ech-fade:hover, .ech-fade-t:hover, .ech-fade-b:hover, .ech-fade-l:hover, .ech-fade-r:hover, .ech-fade-c-in:hover, .ech-fade-m-in:hover, .ech-fade-m-out:hover, .ech-fade-c-out:hover, .ech-bounce-t:hover, .ech-bounce-b:hover, .ech-bounce-r:hover, .ech-bounce-l:hover {
    color: #fff;
}
/*垂直方向进来的:before变化(一半)*/
.ech-fade-m-in:hover:before, .ech-fade-m-in:hover:after {
    transform: scaleY(.51);
}
/*垂直方向进来的:before变化*/
.ech-fade-t:hover:before, .ech-fade-b:hover:before, .ech-fade-m-out:hover:before, .ech-bounce-b:hover:before, .ech-bounce-t:hover:before {
    transform: scaleY(1);
}
/*水平方向进来的:before变化(一半)*/
.ech-fade-c-in:hover:before, .ech-fade-c-in:hover:after {
    transform: scaleX(.51);
}
/*水平方向进来的:before变化*/
.ech-fade-l:hover:before, .ech-fade-r:hover:before,.ech-fade-c-out:hover:before, .ech-bounce-l:hover:before, .ech-bounce-r:hover:before {
    transform: scaleX(1);
}

.yellow-flower:hover .cover{animation:scale 0.5s 1 linear;z-index: 1;}
.yellow-flower:hover .picture{animation:scale1 0.5s 1 linear;z-index: 1;}
@keyframes scale{
0%{transform:scale(0.2);opacity: 1;}
50%{opacity: 0.5;}
100%{transform:scale(1);opacity: 0.7;}
}
@keyframes scale1{
0%{transform:scale(1);}
100%{transform:scale(0);}
}

.wobble-skew {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-skew:hover, .wobble-skew:focus, .wobble-skew:active {
-webkit-animation-name: wobble-skew;
animation-name: wobble-skew;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

5.鸡肋采撷

在写css3代码库的时候,笔者也开掘封装css3的三个鸡肋景况。

1.css3的效应太过分灵活,两种,封装非常轻巧出现众口难调的动静,以至各样类别的效果与利益兴许出现效果差非常的少,但正是不一样等,这样便是封装的库并不符合用在品种上。

2.还应该有少数在于,css3功力基本上每叁个门类都以有应用,并且是常用,然而日常项目要用到的css3成效最多也就拾贰个,况且也简单,手写不慢得以兑现,根本没必要去引二个插件也许库。

可是最后作者依旧坚定不移写下去了,原因如下

1.如若项目支付,对动画片效果的渴求基本不会完结非常的从严的程度,笔者完全能够多引一个文件,扩张本人的开垦效能,压缩过后的文件大概只有10K左右,能够承受。

2.就算在项目用不上,作者也得以作为是练手,学习的效应。若是之后项目要求动画效果,就算动画效果跟自个儿封装的不等同,小编也得以望着来扩充改变。

3.就算开垦的时候没动用上那么些库,万一略推动画,作者写过,不过忘了怎么写,也得以回头看怎么落到实处!

4.只要开垦的时候,不知情放怎么成效好,这些库,也能起到一定的参照意义!

5.今后多写多少个,说不定起到一个疏散思维的魔法,写了这个成效,想到了另一对作用怎么写,可能想到还也许有啥效劳可以写,那么些也是可怜好的一个结果和收获!

animation-name 指定要绑定到选择器的关键帧的名称
animation-duration
动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
initial 设置属性为其默认值
inherit 从父元素继承属性

70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}

4-2.反向动画

在4-1的基本功上,加上海高校势实践动画,也有不均等的功力

没加反向动画效果
彩世界网址 4

加多反向动画效果

彩世界网址 5

下面是一个简单的纯css3写出来的动画效果
图片选择自己喜欢的就好

@keyframes push {
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}

2-3-2机械钟振铃效果

彩世界网址 6

html

JavaScript

<span class="ech-shake-time">shake-time</span>

1
<span class="ech-shake-time">shake-time</span>

css

/*仿石英钟振铃效果*/ .ech-shake-time:hover { animation: shake-time 1s ease; } @keyframes shake-time { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*仿闹钟振铃效果*/
.ech-shake-time:hover {
    animation: shake-time 1s ease;
}
 
@keyframes shake-time {
    0% {
        transform: scale(1);
    }
    10%, 20% {
        transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

 

/* Float */
.float {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float:hover, .float:focus, .float:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}

2-1-5边框变化

彩世界网址 7

html

JavaScript

<span class="ech-border">border</span> <span class="ech-border-in">border-in</span>

1
2
<span class="ech-border">border</span>
<span class="ech-border-in">border-in</span>

css

.ech-border,.ech-border-in{ transition: all .4s; } .ech-border:hover { box-shadow: 0 0 0 4px #09f, 0 0 1px transparent; } .ech-border-in:hover { box-shadow: inset 0 0 0 4px #09f, 0 0 1px transparent; }

1
2
3
4
5
6
7
8
9
10
.ech-border,.ech-border-in{
    transition: all .4s;
}
.ech-border:hover {
    box-shadow: 0 0 0 4px #09f, 0 0 1px transparent;
}
 
.ech-border-in:hover {
    box-shadow: inset 0 0 0 4px #09f, 0 0 1px transparent;
}

我们用到的css3动画属性有animation和transform,transform主要针对动画须臾间,animation则指向动画的流水生产线。

<style type="text/css">
/* demo 样式 */
body {
margin: 0 auto;
max-width: 800px;
padding: 20px;
font-family: sans-serif;
color: #333;
line-height: 140%;
}
img {
border: none;
}
#effects {
margin-top: 5em;
}
h1 {
text-align: center;
font-size: 4em;
}
h2 {
margin-top: 2em;
}
</style>

4.未知探究

好了,讲罢了hover动画和预设动画,笔者付出的时候,开采了那样局地有意思的东西,小编也希图继续钻探,也提出大家玩下,说不定曾几何时做出了惊天动地的东西!如下边包车型客车栗子!

下边说的卡通片,不分hover动画和预设动画,我们只顾

.pink-flower:hover .cover{animation:pink 0.8s 1 linear;z-index: 1;}
.pink-flower:hover .picture{animation:pink1 0.8s 1 linear;z-index: 1;}
@keyframes pink{
0%{transform:scale(0.2);opacity: 1;}
50%{opacity: 0.5;transform:scale(1) rotate(360deg);}
100%{transform:scale(1) rotate(360deg);opacity: 0.7;}
}
@keyframes pink1{
10%{transform:scale(0.8) translate(50%,0) rotate(180deg);}
20%{transform:scale(0.6) translate(150%,0) rotate(180deg);}
30%{transform:scale(0.4) translate(200%,0) rotate(180deg);}
40%{transform:scale(0.2) translate(250%,0) rotate(180deg);}
50%{transform:scale(0.05) translate(300%,0) rotate(180deg);}
60%{transform:scale(0.2) translate(-300%,0) rotate(180deg);}
70%{transform:scale(0.4) translate(-250%,0) rotate(180deg);}
80%{transform:scale(0.6) translate(-200%,0) rotate(180deg);}
90%{transform:scale(0.8) translate(-150%,0) rotate(180deg);}
100%{transform:scale(1) translate(-50%,0) rotate(180deg);}
}

33.3% {
-webkit-transform: translate(-6px, 6px);
transform: translate(-6px, 6px);
}

2-3较复杂动画

2-1和2-2的原委,都是采用过渡实现效果与利益,那么这一块正是使用动画来兑现效果与利益!分裂正是hover的写法是扩大一个动画,动画的卷入,难度就在于创新意识。

.write-flower:hover .cover{animation:translate 0.5s 1 linear;z-index: 1;}
@keyframes translate{
0%{opacity: 0;top: -110%;}
10%{}
100%{top:10px;opacity: 0.7;}
}

/* Curl Top Right */
.curl-top-right {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-right:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
top: 0;
right: 0;
background: white;
/* IE9 */
background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-right:hover:before, .curl-top-right:focus:before, .curl-top-right:active:before {
width: 25px;
height: 25px;
}

编纂自个儿的代码库:CSS3 常用动画的兑现

2017/08/16 · CSS · 动画

原来的小说出处: 守候你   

.green-flower:hover .cover{animation:skew 0.5s 1 linear;z-index: 1;}
@keyframes skew{
0%{opacity: 0;}
50%{transform:rotate3d(0,1,0,180deg);opacity: 1}
100%{opacity: 0.7;}
}

/* Sink */
.sink {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.sink:hover, .sink:focus, .sink:active {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}

2-1-2样子变化

彩世界网址 8

html

<span class="ech-skew-l">skew-l</span> <span class="ech-skew-r">skew-r</span> <span class="ech-skew-l-t">skew-l-t</span> <span class="ech-skew-r-t">skew-r-t</span> <span class="ech-skew-l-b">skew-l-b</span> <span class="ech-skew-r-b">skew-r-b</span>

1
2
3
4
5
6
<span class="ech-skew-l">skew-l</span>
<span class="ech-skew-r">skew-r</span>
<span class="ech-skew-l-t">skew-l-t</span>
<span class="ech-skew-r-t">skew-r-t</span>
<span class="ech-skew-l-b">skew-l-b</span>
<span class="ech-skew-r-b">skew-r-b</span>

css

.ech-skew-l, .ech-skew-r, .ech-skew-l-t, .ech-skew-r-b, .ech-skew-l-b, .ech-skew-r-t{ transition: all .4s; } .ech-skew-r-t, .ech-skew-l-t { transform-origin: 0 100%; } .ech-skew-r-b, .ech-skew-l-b { transform-origin: 100% 0; } .ech-skew-l:hover { transform: skew(-15deg); } .ech-skew-r:hover { transform: skew(15deg); } .ech-skew-l-t:hover { transform: skew(-15deg); } .ech-skew-r-t:hover { transform: skew(15deg); } .ech-skew-l-b:hover { transform: skew(15deg); } .ech-skew-r-b:hover { transform: skew(-15deg); }

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
.ech-skew-l, .ech-skew-r, .ech-skew-l-t, .ech-skew-r-b, .ech-skew-l-b, .ech-skew-r-t{
    transition: all .4s;
}
.ech-skew-r-t, .ech-skew-l-t {
    transform-origin: 0 100%;
}
.ech-skew-r-b, .ech-skew-l-b {
    transform-origin: 100% 0;
}
.ech-skew-l:hover {
    transform: skew(-15deg);
}
.ech-skew-r:hover {
    transform: skew(15deg);
}
.ech-skew-l-t:hover {
    transform: skew(-15deg);
}
.ech-skew-r-t:hover {
    transform: skew(15deg);
}
.ech-skew-l-b:hover {
    transform: skew(15deg);
}
.ech-skew-r-b:hover {
    transform: skew(-15deg);
}
animation: name duration timing-function delay iteration-count direction fill-mode play-state;这是简写

49.95% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}

2-3-1闪光效果

彩世界网址 9

html

JavaScript

<span class="ech-flash">flash</span>

1
<span class="ech-flash">flash</span>

css

.ech-flash:hover { animation: flash .5s ease; } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }

1
2
3
4
5
6
7
8
9
10
11
12
.ech-flash:hover {
    animation: flash .5s ease;
}
 
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

首先transform的值有

70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}

2-3-5颠簸效果

彩世界网址 10

html

JavaScript

<span class="ech-shake">shake</span>

1
<span class="ech-shake">shake</span>

css

.ech-shake:hover { animation: shake .5s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.ech-shake:hover {
    animation: shake .5s ease;
}
 
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

.orange-flower:hover .cover{animation:orange 0.5s 1 linear;z-index: 1;}
.orange-flower:hover .picture{animation:orange1 0.5s 1 linear;z-index: 1;}
@keyframes orange{
0%{transform:rotate(180deg);}
20%{transform:rotate(180deg) translate(10%,10%);opacity: 0.9;}
40%{transform:rotate(180deg) translate(20%,20%);opacity: 0.8;}
40%{transform:rotate(180deg) translate(30%,30%);opacity: 0.8;}
60%{transform:rotate(180deg) translate(20%,20%);opacity: 0.7;}
80%{transform:rotate(180deg) translate(10%,10%);opacity: 0.6;}
100%{transform:rotate(180deg) translate(0,0);opacity: 0;}
}
@keyframes orange1{
0%{transform:rotate(180deg);}
20%{transform:rotate(180deg) translate(-10%,-10%);opacity: 0.9;}
40%{transform:rotate(180deg) translate(-20%,-20%);opacity: 0.8;}
40%{transform:rotate(180deg) translate(-30%,-30%);opacity: 0.8;}
60%{transform:rotate(180deg) translate(-20%,-20%);opacity: 0.7;}
80%{transform:rotate(180deg) translate(-10%,-10%);opacity: 0.6;}
100%{transform:rotate(180deg) translate(0,0);opacity: 0;}
}
</style>
<body>
<div class="content">
<div class="yellow-flower flower">
<div class="picture">
<img src="img/flash.jpg" alt="图片不可能加载">
</div>
<div class="cover">
<h2><a href="#">Come here</a></h2>
<p><a href="#">you can</a></p>
</div>
</div>
<div class="write-flower flower">
<div class="picture">
<img src="img/flash7.jpg" alt="图片不能够加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class="green-flower flower">
<div class="picture">
<img src="img/flash2.jpg" alt="图片不可能加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class="red-flower flower">
<div class="picture">
<img src="img/flash3.jpg" alt="图片无法加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class="pink-flower flower">
<div class="picture">
<img src="img/flash4.jpg" alt="图片无法加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class="purple-flower flower">
<div class="picture">
<img src="img/flash5.jpg" alt="图片不只怕加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class="blue-flower flower">
<div class="picture">
<img src="img/flash6.jpg" alt="图片无法加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class="orange-flower flower">
<div class="picture">
<img src="img/flash1.jpg" alt="图片无法加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
</div>
</body>
</html>

/* Buzz */
@-webkit-keyframes buzz {
50% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

2-3-6弹跳效果

彩世界网址 11

html

JavaScript

<span class="ech-bounce">bounce</span>

1
<span class="ech-bounce">bounce</span>

css

.ech-bounce:hover { animation: bounce 1s ease; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.ech-bounce:hover {
    animation: bounce 1s ease;
}
 
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.purple-flower:hover .cover{animation:purple 0.5s 1 linear;z-index: 1;}
.purple-flower:hover .picture{animation:purple1 0.5s 1 linear;z-index: 1;}
@keyframes purple{
0%{transform:scale(1.5);opacity: 0.2;}
20%{transform:scale(1.4);opacity: 0.3;}
40%{transform:scale(1.3);opacity: 0.4;}
60%{transform:scale(1.2);opacity: 0.5;}
80%{transform:scale(1.1);opacity: 0.6;}
100%{transform:scale(1);opacity: 1;}
}
@keyframes purple1{
0%{transform:scale(1);opacity: 1;}
20%{transform:scale(0.8);opacity: 0.8;}
40%{transform:scale(0.6);opacity: 0.6;}
60%{transform:scale(0.4);opacity: 0.5;}
80%{transform:scale(0.2);opacity: 0.3;}
100%{transform:scale(0);opacity: 0;}
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

2.hover动画

说了那么多,是时候步向正文了,

首先是hover动画,关于那个概念,小编表达下,正是鼠标移上去触发的动画,就是接触了鼠标的hover事件时能看到的卡通片!上边,依照项目,三个叁个的写!

.blue-flower:hover .cover{animation:blue 0.8s 1 linear;z-index: 1;}
.blue-flower:hover .picture{animation:blue1 0.8s 1 linear;z-index: 1;}
@keyframes blue{
20%{transform:scale(0.2) translate(-300%,300%);opacity: 0;}
50%{transform:scale(0.3) translate(-200%,200%);opacity: 0.4}
70%{transform:scale(0.5) translate(0,0);opacity: 0.7}
100%{transform:scale(0.7) translate(0,0);opacity: 0.8}
}
@keyframes blue1{
20%{transform:scale(0.7) translate(0,0);opacity: 1}
50%{transform:scale(0.5) translate(0,0);opacity: 1}
70%{transform:scale(0.3) translate(250%,-250%);opacity: 0.4}
100%{transform:scale(0.2) translate(350%,-350%);opacity: 0;}
}

@keyframes wobble-top {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

html

JavaScript

<span class="ech-rectangle">rectangle</span> <span class="ech-radius">radius</span>

1
2
<span class="ech-rectangle">rectangle</span>
<span class="ech-radius">radius</span>

css

.ech-radius,.ech-rectangle{ transition: all .4s; } .ech-radius { border-radius: 10px; } .ech-radius:hover { border-radius: 0; } .ech-rectangle:hover { border-radius: 10px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ech-radius,.ech-rectangle{
    transition: all .4s;
}
.ech-radius {
    border-radius: 10px;
}
 
.ech-radius:hover {
    border-radius: 0;
}
 
.ech-rectangle:hover {
    border-radius: 10px;
}

animation的值有

80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}

2-1-8圆角变化

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flower动画</title>
</head>
<style>
*{margin: 0;padding: 0;}
body,div{margin: 0;padding: 0;width: 100%;height: 100%;}
a{text-decoration: none;color: #fff;}
.flower{width: 250px;height: 250px;position: relative;float: left;margin: 10px 50px;}
.picture img{border:solid 10px; border-radius: 50%;border-width: 10px;width: 250px;height: 250px;overflow: hidden;border-color: #fff;}
.cover{width: 250px;height: 250px;border-radius: 50%;color: #000;position: absolute;}
.cover h2{padding: 95px 0 0 60px;color: #fff;}
.cover p{padding: 0 0 90px 90px;color: #fff;}
.yellow-flower .cover{top: 10px;left:10px;background: #92ab24;z-index: -100;opacity: 0.7;}
.write-flower .cover{top: 10px;left:10px;background: #6192dc;z-index: -100;opacity: 0.7;}
.green-flower .cover{top: 10px;left:10px;background: #dcbcb0;z-index: -100;opacity: 0.7;}
.red-flower .cover{top: 10px;left:10px;background: #4ba2a7;z-index: -100;opacity: 0.7;}
.pink-flower .cover{top: 10px;left:10px;background:#d88b8b;z-index: -100;opacity: 0.7;}
.purple-flower .cover{top: 10px;left:10px;background: #da7685;z-index: -100;opacity: 0.7;}
.blue-flower .cover{top: 10px;left:10px;background: #a74ba4;z-index: -100;opacity: 0.7;}
.orange-flower .cover{top: 10px;left:10px;background: #7fda76;z-index: -100;opacity: 0.7;}

49.95% {
-webkit-transform: translate(4px, 4px);
transform: translate(4px, 4px);
}

2-1-7发光度变化

彩世界网址 12

html

JavaScript

<span class="ech-fade-out">fade-out</span> <span class="ech-fade-in">fade-in</span>

1
2
<span class="ech-fade-out">fade-out</span>
<span class="ech-fade-in">fade-in</span>

css

.ech-fade-out,.ech-fade-in{ transition: all .4s; } .ech-fade-out:hover { opacity: .6; } .ech-fade-in { opacity: .5; } .ech-fade-in:hover { opacity: 1; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ech-fade-out,.ech-fade-in{
    transition: all .4s;
}
.ech-fade-out:hover {
    opacity: .6;
}
 
.ech-fade-in {
    opacity: .5;
}
 
.ech-fade-in:hover {
    opacity: 1;
}

80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}

彩世界网址 13

/* Bubble Bottom */
.bubble-bottom {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-bottom:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: bottom;
transition-property: bottom;
left: calc(50% - 10px);
bottom: 0;
border-width: 10px 10px 0 10px;
border-color: #e1e1e1 transparent transparent transparent;
}
.bubble-bottom:hover:before, .bubble-bottom:focus:before, .bubble-bottom:active:before {
bottom: -10px;
}

2-2-3箭头动画

彩世界网址 14

html

JavaScript

<span class="ech-arrow-l">arrow-l</span> <span class="ech-arrow-r">arrow-r</span> <span class="ech-arrow-t">arrow-t</span> <span class="ech-arrow-b">arrow-b</span> <span class="ech-arrow-l-move">arrow-l</span> <span class="ech-arrow-r-move">arrow-r</span> <span class="ech-arrow-t-move">arrow-t</span> <span class="ech-arrow-b-move">arrow-b</span>

1
2
3
4
5
6
7
8
<span class="ech-arrow-l">arrow-l</span>
<span class="ech-arrow-r">arrow-r</span>
<span class="ech-arrow-t">arrow-t</span>
<span class="ech-arrow-b">arrow-b</span>
<span class="ech-arrow-l-move">arrow-l</span>
<span class="ech-arrow-r-move">arrow-r</span>
<span class="ech-arrow-t-move">arrow-t</span>
<span class="ech-arrow-b-move">arrow-b</span>

css

.ech-arrow-l, .ech-arrow-r, .ech-arrow-t, .ech-arrow-b, .ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move{ position: relative; transition: all .3s; z-index: 1; } /*起头化箭头样式*/ .ech-arrow-l:before, .ech-arrow-r:before, .ech-arrow-t:before, .ech-arrow-b:before, .ech-arrow-l-move:before, .ech-arrow-r-move:before, .ech-arrow-t-move:before, .ech-arrow-b-move:before { position: absolute; transition: all .3s; content: ""; display: block; z-index: -1; border-style: solid; margin: auto; width: 0; height: 0; } .ech-arrow-l:before, .ech-arrow-l-move:before { left: 0; top: 0; bottom: 0; border-width: 10px 10px 10px 0; border-color: transparent #ccc transparent transparent; } .ech-arrow-r:before, .ech-arrow-r-move:before { right: 0; top: 0; bottom: 0; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #ccc; } .ech-arrow-t:before, .ech-arrow-t-move:before { left: 0; top: 0; right: 0; border-width: 0 10px 10px 10px; border-color: transparent transparent #ccc transparent; } .ech-arrow-b:before, .ech-arrow-b-move:before { left: 0; bottom: 0; right: 0; border-width: 10px 10px 0 10px; border-color: #ccc transparent transparent transparent; } .ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move { transition: transform .3s; } /*hover效果*/ .ech-arrow-l-move:hover { transform: translateX(10px); } .ech-arrow-r-move:hover { transform: translateX(-10px); } .ech-arrow-t-move:hover { transform: translateY(10px); } .ech-arrow-b-move:hover { transform: translateY(-10px); } .ech-arrow-l-move:hover:before, .ech-arrow-l:hover:before { transform: translateX(-10px); } .ech-arrow-r-move:hover:before, .ech-arrow-r:hover:before { transform: translateX(10px); } .ech-arrow-t-move:hover:before, .ech-arrow-t:hover:before { transform: translateY(-10px); } .ech-arrow-b-move:hover:before, .ech-arrow-b:hover:before { transform: translateY(10px); }

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
.ech-arrow-l, .ech-arrow-r, .ech-arrow-t, .ech-arrow-b, .ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move{
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*初始化箭头样式*/
.ech-arrow-l:before, .ech-arrow-r:before, .ech-arrow-t:before, .ech-arrow-b:before, .ech-arrow-l-move:before, .ech-arrow-r-move:before, .ech-arrow-t-move:before, .ech-arrow-b-move:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    z-index: -1;
    border-style: solid;
    margin: auto;
    width: 0;
    height: 0;
}
 
.ech-arrow-l:before, .ech-arrow-l-move:before {
    left: 0;
    top: 0;
    bottom: 0;
    border-width: 10px 10px 10px 0;
    border-color: transparent #ccc transparent transparent;
}
 
.ech-arrow-r:before, .ech-arrow-r-move:before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ccc;
}
 
.ech-arrow-t:before, .ech-arrow-t-move:before {
    left: 0;
    top: 0;
    right: 0;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ccc transparent;
}
 
.ech-arrow-b:before, .ech-arrow-b-move:before {
    left: 0;
    bottom: 0;
    right: 0;
    border-width: 10px 10px 0 10px;
    border-color: #ccc transparent transparent transparent;
}
 
.ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move {
    transition: transform .3s;
}
/*hover效果*/
.ech-arrow-l-move:hover {
    transform: translateX(10px);
}
 
.ech-arrow-r-move:hover {
    transform: translateX(-10px);
}
 
.ech-arrow-t-move:hover {
    transform: translateY(10px);
}
 
.ech-arrow-b-move:hover {
    transform: translateY(-10px);
}
 
.ech-arrow-l-move:hover:before, .ech-arrow-l:hover:before {
    transform: translateX(-10px);
}
 
.ech-arrow-r-move:hover:before, .ech-arrow-r:hover:before {
    transform: translateX(10px);
}
 
.ech-arrow-t-move:hover:before, .ech-arrow-t:hover:before {
    transform: translateY(-10px);
}
 
.ech-arrow-b-move:hover:before, .ech-arrow-b:hover:before {
    transform: translateY(10px);
}

.push {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.push:hover, .push:focus, .push:active {
-webkit-animation-name: push;
animation-name: push;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

2-1-4位移变化

彩世界网址 15

html

JavaScript

<span class="ech-t">up</span> <span class="ech-b">bottom</span> <span class="ech-l">left</span> <span class="ech-r">right</span>

1
2
3
4
<span class="ech-t">up</span>
<span class="ech-b">bottom</span>
<span class="ech-l">left</span>
<span class="ech-r">right</span>

css

.ech-t,.ech-bottom,.ech-top,.ech-right{ transition: all .4s; } .ech-t:hover { transform: translate3d(0, -10px, 0); } .ech-b:hover { transform: translate3d(0, 10px, 0); } .ech-l:hover { transform: translate3d(-10px, 0, 0); } .ech-r:hover { transform: translate3d(10px, 0, 0); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.ech-t,.ech-bottom,.ech-top,.ech-right{
    transition: all .4s;
}
.ech-t:hover {
    transform: translate3d(0, -10px, 0);
}
.ech-b:hover {
    transform: translate3d(0, 10px, 0);
}
.ech-l:hover {
    transform: translate3d(-10px, 0, 0);
}
.ech-r:hover {
    transform: translate3d(10px, 0, 0);
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

2-2.颜色动画效果

那有的的动画首要是应用:before和:after进行落到实处的,所以,大家假诺利用的时候,切记:before和:after未有被侵吞,不然会显得不健康

@keyframes wobble-vertical {
16.65% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}

2-1-1大大小小变化

彩世界网址 16

html

<span class="ech-big">big</span> <span class="ech-small">small</span>

1
2
<span class="ech-big">big</span>
<span class="ech-small">small</span>

css

.ech-big,.ech-small { transition: all .4s; } .ech-big:hover{ transform: scale(1.2); } .ech-small:hover{ transform: scale(.9); }

1
2
3
4
5
6
7
8
9
.ech-big,.ech-small {
    transition: all .4s;
}
.ech-big:hover{
    transform: scale(1.2);
}
.ech-small:hover{
    transform: scale(.9);
}

/* Bubble Float Right */
.bubble-float-right {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-right:before {
position: absolute;
z-index: -1;
top: calc(50% - 10px);
right: 0;
content: '';
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #e1e1e1;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: right;
transition-property: right;
}
.bubble-float-right:hover, .bubble-float-right:focus, .bubble-float-right:active {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
.bubble-float-right:hover:before, .bubble-float-right:focus:before, .bubble-float-right:active:before {
right: -10px;
}

4-1.极致实施动画

一个清淡无奇的卡通,加上Infiniti实行,平常会产出很和睦的功用,

彩世界网址 17

不过有个别时候的效果救经引足

彩世界网址 18

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

3.预设动画

受限于篇幅的长度,小编也不想分手两篇小说写。关于这些预设动画,笔者就大致的说一下,写一下,小编直接给二个大意的操作演示,和完全的代码!反正写法那几个也是相比较单纯,无非正是改叁个类名而已。难的是卡通的一部分编辑,那么些需求创新意识,大家可以上网仿效。

彩世界网址 19

(不精通怎么,gif截大图放不上来,就放了张小的,大家结果上面包车型客车jpg一同看把,正是经过下边包车型大巴开关,体现动画,大家也可以在github上面下载代码看下)

彩世界网址 20

(完整代码比较多,这里贴出,但是建议大家稍微看一下,过一下就好,因为这个只看代码是会懵逼的,要在浏览器打开文件,一看调试一边看,这样会很简单,很容易的明白)

html代码

JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="ec-css2.css"> <style> .big { width: 500px; height: 500px; border: 1px solid #ccc; margin: 100px auto 0 auto; } #demo { width: 200px; height: 100px; margin: 200px auto; background: #09f; } .btn-box { margin: 0 auto 100px auto; max-width: 1200px; font-size: 0; } .btn-box a { font-size: 16px; display: inline-block; height: 40px; line-height: 40px; padding: 0 6px; color: #333; background: #ccc; margin: 0 0 10px 10px; } .btn-box .cur{ background: #09f; color: #fff; } .an-type{ width: 500px; height: 100px; margin: 0 auto; } .an-type a{ font-size: 16px; display: inline-block; height: 40px; line-height: 40px; padding: 0 6px; color: #333; background: #ccc; margin: 0 10px 10px 0; } .an-type .cur{ background: #09f; color: #fff; } </style> </head> <body> <div class="big"> <div class="" id="demo"></div> </div> <div class="an-type"> <a href="javascripr:;" data-class="ec-infinite" id="infinite">infinite</a> <a href="javascripr:;" data-class="ec-alternate" id="alternate">alternate</a> <a href="javascripr:;" id="stop">stop</a> </div> <div class="btn-box"> <a href="javascripr:;" data-class="ec-bounce" class="an-a">bounce</a> <a href="javascripr:;" data-class="ec-bounce-in-b" class="an-a">bounce-in-b</a> <a href="javascripr:;" data-class="ec-bounce-in-l" class="an-a">bounce-in-l</a> <a href="javascripr:;" data-class="ec-bounce-in-t" class="an-a">bounce-in-t</a> <a href="javascripr:;" data-class="ec-bounce-in-r" class="an-a">bounce-in-r</a> <a href="javascripr:;" data-class="ec-bounce-out-b" class="an-a">bounce-out-b</a> <a href="javascripr:;" data-class="ec-bounce-out-l" class="an-a">bounce-out-l</a> <a href="javascripr:;" data-class="ec-bounce-out-t" class="an-a">bounce-out-t</a> <a href="javascripr:;" data-class="ec-bounce-out-r" class="an-a">bounce-out-r</a> <br/> <a href="javascripr:;" data-class="ec-wobble" class="an-a">wobble</a> <a href="javascripr:;" data-class="ec-wobble-t" class="an-a">wobble-t</a> <a href="javascripr:;" data-class="ec-wobble-b" class="an-a">wobble-b</a> <br/> <a href="javascripr:;" data-class="ec-fade-in" class="an-a">fade-in</a> <a href="javascripr:;" data-class="ec-fade-in-t" class="an-a">fade-in-t</a> <a href="javascripr:;" data-class="ec-fade-in-b" class="an-a">fade-in-b</a> <a href="javascripr:;" data-class="ec-fade-in-l" class="an-a">fade-in-l</a> <a href="javascripr:;" data-class="ec-fade-in-r" class="an-a">fade-in-r</a> <a href="javascripr:;" data-class="ec-fade-out" class="an-a">fade-out</a> <a href="javascripr:;" data-class="ec-fade-out-t" class="an-a">fade-out-t</a> <a href="javascripr:;" data-class="ec-fade-out-b" class="an-a">fade-out-b</a> <a href="javascripr:;" data-class="ec-fade-out-l" class="an-a">fade-out-l</a> <a href="javascripr:;" data-class="ec-fade-out-r" class="an-a">fade-out-r</a> <br/> <a href="javascripr:;" data-class="ec-rotate-in" class="an-a">rotate-in</a> <a href="javascripr:;" data-class="ec-rotate-in-rb" class="an-a">rotate-in-rb</a> <a href="javascripr:;" data-class="ec-rotate-in-rt" class="an-a">rotate-in-rt</a> <a href="javascripr:;" data-class="ec-rotate-in-lb" class="an-a">rotate-in-lb</a> <a href="javascripr:;" data-class="ec-rotate-in-lt" class="an-a">rotate-in-lt</a> <a href="javascripr:;" data-class="ec-rotate-out" class="an-a">rotate-out</a> <a href="javascripr:;" data-class="ec-rotate-out-rb" class="an-a">rotate-out-rb</a> <a href="javascripr:;" data-class="ec-rotate-out-rt" class="an-a">rotate-out-rt</a> <a href="javascripr:;" data-class="ec-rotate-out-lb" class="an-a">rotate-out-lb</a> <a href="javascripr:;" data-class="ec-rotate-out-lt" class="an-a">rotate-out-lt</a> <br/> <a href="javascripr:;" data-class="ec-flip-in-x" class="an-a">flip-in-x</a> <a href="javascripr:;" data-class="ec-flip-in-y" class="an-a">flip-in-y</a> <a href="javascripr:;" data-class="ec-flip-out-x" class="an-a">flip-out-x</a> <a href="javascripr:;" data-class="ec-flip-out-y" class="an-a">flip-out-y</a> <br/> <a href="javascripr:;" data-class="ec-light-speed-in" class="an-a">light-speed-in</a> <a href="javascripr:;" data-class="ec-light-speed-out" class="an-a">light-speed-out</a> <br/> <a href="javascripr:;" data-class="ec-shake-time" class="an-a">shake-time</a> <a href="javascripr:;" data-class="ec-flash" class="an-a">flash</a> <a href="javascripr:;" data-class="ec-rubber-band" class="an-a">rubber-band</a> <a href="javascripr:;" data-class="ec-rubber-band-fast" class="an-a">rubber-band-fast</a> <a href="javascripr:;" data-class="ec-swing" class="an-a">swing</a> <a href="javascripr:;" data-class="ec-shake" class="an-a">shake</a> <a href="javascripr:;" data-class="ec-pulse-shrink" class="an-a">pulse-shrink</a> <a href="javascripr:;" data-class="ec-pulse" class="an-a">pulse</a> </div> </body> <script src="ec-do.js"></script> <script type="text/javascript"> window.onload = function () { var oDivDemo = document.getElementById("demo"), oDivBox = document.getElementsByClassName("btn-box")[0], oAan=oDivBox.getElementsByTagName("a"), oInfinite=document.getElementById("infinite"),_infinite=false, oAlternate=document.getElementById("alternate"),_alternate=false, oStop=document.getElementById("stop"); oStop.addEventListener("click",function(){ oDivDemo.className=""; _infinite=false; _alternate=false; ecDo.removeClass(oInfinite,"cur"); ecDo.removeClass(oAlternate,"cur"); ecDo.removeClass(oAan,"cur"); }) oInfinite.addEventListener("click",function(){ _infinite=!_infinite; if(_infinite){ ecDo.addClass(oInfinite,"cur") ecDo.addClass(oDivDemo,"ec-infinite"); } else{ ecDo.removeClass(oInfinite,"cur") ecDo.removeClass(oDivDemo,"ec-infinite"); } }) oAlternate.addEventListener("click",function(){ _alternate=!_alternate; if(_alternate){ ecDo.addClass(oAlternate,"cur") ecDo.addClass(oDivDemo,"ec-alternate"); } else{ ecDo.removeClass(oAlternate,"cur") ecDo.removeClass(oDivDemo,"ec-alternate"); } }) oDivBox.addEventListener("click", function (e) { var e = e || window.event; var target = e.target || e.srcElement, _class = ""; if (target.nodeName.toLowerCase() === 'a') { ecDo.addClass(target,"cur"); ecDo.removeClass(ecDo.siblings(target,"a"),"cur") _class =target.getAttribute("data-class"); oDivDemo.className = ""; setTimeout(function () { ecDo.addClass(oDivDemo,_class); if(_infinite){ ecDo.addClass(oDivDemo,"ec-infinite"); } else{ ecDo.removeClass(oDivDemo,"ec-infinite"); } if(_alternate){ ecDo.addClass(oDivDemo,"ec-alternate"); } else{ ecDo.removeClass(oDivDemo,"ec-alternate"); } }, 50) } }) } </script> </html>

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="ec-css2.css">
    <style>
        .big {
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            margin: 100px auto 0 auto;
        }
 
        #demo {
            width: 200px;
            height: 100px;
            margin: 200px auto;
            background: #09f;
        }
 
        .btn-box {
            margin: 0 auto 100px auto;
            max-width: 1200px;
            font-size: 0;
        }
 
        .btn-box a {
            font-size: 16px;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0 6px;
            color: #333;
            background: #ccc;
            margin: 0 0 10px 10px;
        }
        .btn-box .cur{
            background: #09f;
            color: #fff;
        }
        .an-type{
            width: 500px;
            height: 100px;
            margin: 0 auto;
        }
        .an-type a{
            font-size: 16px;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0 6px;
            color: #333;
            background: #ccc;
            margin: 0 10px 10px 0;
        }
        .an-type .cur{
            background: #09f;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="big">
    <div class="" id="demo"></div>
</div>
<div class="an-type">
    <a href="javascripr:;" data-class="ec-infinite" id="infinite">infinite</a>
    <a href="javascripr:;" data-class="ec-alternate" id="alternate">alternate</a>
    <a href="javascripr:;" id="stop">stop</a>
</div>
<div class="btn-box">
    <a href="javascripr:;" data-class="ec-bounce" class="an-a">bounce</a>
    <a href="javascripr:;" data-class="ec-bounce-in-b" class="an-a">bounce-in-b</a>
    <a href="javascripr:;" data-class="ec-bounce-in-l" class="an-a">bounce-in-l</a>
    <a href="javascripr:;" data-class="ec-bounce-in-t" class="an-a">bounce-in-t</a>
    <a href="javascripr:;" data-class="ec-bounce-in-r" class="an-a">bounce-in-r</a>
    <a href="javascripr:;" data-class="ec-bounce-out-b" class="an-a">bounce-out-b</a>
    <a href="javascripr:;" data-class="ec-bounce-out-l" class="an-a">bounce-out-l</a>
    <a href="javascripr:;" data-class="ec-bounce-out-t" class="an-a">bounce-out-t</a>
    <a href="javascripr:;" data-class="ec-bounce-out-r" class="an-a">bounce-out-r</a>
    <br/>
    <a href="javascripr:;" data-class="ec-wobble" class="an-a">wobble</a>
    <a href="javascripr:;" data-class="ec-wobble-t" class="an-a">wobble-t</a>
    <a href="javascripr:;" data-class="ec-wobble-b" class="an-a">wobble-b</a>
    <br/>
    <a href="javascripr:;" data-class="ec-fade-in" class="an-a">fade-in</a>
    <a href="javascripr:;" data-class="ec-fade-in-t" class="an-a">fade-in-t</a>
    <a href="javascripr:;" data-class="ec-fade-in-b" class="an-a">fade-in-b</a>
    <a href="javascripr:;" data-class="ec-fade-in-l" class="an-a">fade-in-l</a>
    <a href="javascripr:;" data-class="ec-fade-in-r" class="an-a">fade-in-r</a>
    <a href="javascripr:;" data-class="ec-fade-out" class="an-a">fade-out</a>
    <a href="javascripr:;" data-class="ec-fade-out-t" class="an-a">fade-out-t</a>
    <a href="javascripr:;" data-class="ec-fade-out-b" class="an-a">fade-out-b</a>
    <a href="javascripr:;" data-class="ec-fade-out-l" class="an-a">fade-out-l</a>
    <a href="javascripr:;" data-class="ec-fade-out-r" class="an-a">fade-out-r</a>
    <br/>
    <a href="javascripr:;" data-class="ec-rotate-in" class="an-a">rotate-in</a>
    <a href="javascripr:;" data-class="ec-rotate-in-rb" class="an-a">rotate-in-rb</a>
    <a href="javascripr:;" data-class="ec-rotate-in-rt" class="an-a">rotate-in-rt</a>
    <a href="javascripr:;" data-class="ec-rotate-in-lb" class="an-a">rotate-in-lb</a>
    <a href="javascripr:;" data-class="ec-rotate-in-lt" class="an-a">rotate-in-lt</a>
    <a href="javascripr:;" data-class="ec-rotate-out" class="an-a">rotate-out</a>
    <a href="javascripr:;" data-class="ec-rotate-out-rb" class="an-a">rotate-out-rb</a>
    <a href="javascripr:;" data-class="ec-rotate-out-rt" class="an-a">rotate-out-rt</a>
    <a href="javascripr:;" data-class="ec-rotate-out-lb" class="an-a">rotate-out-lb</a>
    <a href="javascripr:;" data-class="ec-rotate-out-lt" class="an-a">rotate-out-lt</a>
    <br/>
    <a href="javascripr:;" data-class="ec-flip-in-x" class="an-a">flip-in-x</a>
    <a href="javascripr:;" data-class="ec-flip-in-y" class="an-a">flip-in-y</a>
    <a href="javascripr:;" data-class="ec-flip-out-x" class="an-a">flip-out-x</a>
    <a href="javascripr:;" data-class="ec-flip-out-y" class="an-a">flip-out-y</a>
    <br/>
    <a href="javascripr:;" data-class="ec-light-speed-in" class="an-a">light-speed-in</a>
    <a href="javascripr:;" data-class="ec-light-speed-out" class="an-a">light-speed-out</a>
    <br/>
    <a href="javascripr:;" data-class="ec-shake-time" class="an-a">shake-time</a>
    <a href="javascripr:;" data-class="ec-flash" class="an-a">flash</a>
    <a href="javascripr:;" data-class="ec-rubber-band" class="an-a">rubber-band</a>
    <a href="javascripr:;" data-class="ec-rubber-band-fast" class="an-a">rubber-band-fast</a>
    <a href="javascripr:;" data-class="ec-swing" class="an-a">swing</a>
    <a href="javascripr:;" data-class="ec-shake" class="an-a">shake</a>
    <a href="javascripr:;" data-class="ec-pulse-shrink" class="an-a">pulse-shrink</a>
    <a href="javascripr:;" data-class="ec-pulse" class="an-a">pulse</a>
</div>
</body>
<script src="ec-do.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var oDivDemo = document.getElementById("demo"),
        oDivBox = document.getElementsByClassName("btn-box")[0],
        oAan=oDivBox.getElementsByTagName("a"),
        oInfinite=document.getElementById("infinite"),_infinite=false,
        oAlternate=document.getElementById("alternate"),_alternate=false,
        oStop=document.getElementById("stop");
        oStop.addEventListener("click",function(){
            oDivDemo.className="";
            _infinite=false;
            _alternate=false;
            ecDo.removeClass(oInfinite,"cur");
            ecDo.removeClass(oAlternate,"cur");
            ecDo.removeClass(oAan,"cur");
        })
        oInfinite.addEventListener("click",function(){
            _infinite=!_infinite;
            if(_infinite){
                ecDo.addClass(oInfinite,"cur")
                ecDo.addClass(oDivDemo,"ec-infinite");
            }
            else{
                ecDo.removeClass(oInfinite,"cur")
                ecDo.removeClass(oDivDemo,"ec-infinite");
            }
        })
        oAlternate.addEventListener("click",function(){
            _alternate=!_alternate;
            if(_alternate){
                ecDo.addClass(oAlternate,"cur")
                ecDo.addClass(oDivDemo,"ec-alternate");
            }
            else{
                ecDo.removeClass(oAlternate,"cur")
                ecDo.removeClass(oDivDemo,"ec-alternate");
            }
        })
        oDivBox.addEventListener("click", function (e) {
            var e = e || window.event;
            var target = e.target || e.srcElement, _class = "";
            if (target.nodeName.toLowerCase() === 'a') {
                ecDo.addClass(target,"cur");
                ecDo.removeClass(ecDo.siblings(target,"a"),"cur")
                _class =target.getAttribute("data-class");
                oDivDemo.className = "";
                setTimeout(function () {
                    ecDo.addClass(oDivDemo,_class);
                    if(_infinite){
                        ecDo.addClass(oDivDemo,"ec-infinite");
                    }
                    else{
                        ecDo.removeClass(oDivDemo,"ec-infinite");
                    }
                    if(_alternate){
                        ecDo.addClass(oDivDemo,"ec-alternate");
                    }
                    else{
                        ecDo.removeClass(oDivDemo,"ec-alternate");
                    }
                }, 50)
            }
        })
    }
</script>
</html>

css

/*动画片效果*/ .ec-bounce-in-l { animation: bounce-in-l 1s ease; } @keyframes bounce-in-l { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0) } 60% { opacity: 1; transform: translate3d(25px, 0, 0) } 75% { transform: translate3d(-10px, 0, 0) } 90% { transform: translate3d(5px, 0, 0) } to { -webkit-transform: none; transform: none } } .ec-bounce-in-r { animation: bounce-in-r 1s ease; } @keyframes bounce-in-r { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; transform: translate3d(-25px, 0, 0) } 75% { transform: translate3d(10px, 0, 0) } 90% { transform: translate3d(-5px, 0, 0) } to { -webkit-transform: none; transform: none } } .ec-bounce-in-b{ animation: bounce-in-b 1s; } .ec-bounce-in-t{ animation: bounce-in-t 1s; } @keyframes bounce-in-t { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } to { transform: none; } } @keyframes bounce-in-b{ from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -25px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { transform: none; } } @keyframes bounce-out-b { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } to { opacity: 0; transform: translate3d(0, 2000px, 0); } } .ec-bounce-out-b { animation: bounce-out-b 1s; } @keyframes bounce-out-l { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } } .ec-bounce-out-l { animation: bounce-out-l 1s; } @keyframes bounce-out-r { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } to { opacity: 0; transform: translate3d(2000px, 0, 0); } } .ec-bounce-out-r { animation: bounce-out-r 1s; } @keyframes bounce-out-t { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } to { opacity: 0; transform: translate3d(0, -2000px, 0); } } .ec-bounce-out-t { animation: bounce-out-t 1s; } /*心跳效果*/ .ec-pulse { animation: pulse 1s linear; } .ec-pulse-shrink { animation: pulse .5s linear; } @keyframes pulse { 25% { transform: scale(1.1); } 75% { transform: scale(0.9); } } .ec-flash { animation: flash .5s ease; } /*摇摆*/ .ec-swing { animation: swing .5s ease; } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0); } } /*摇摆*/ .ec-wobble-t{ transform-origin: 0 100%; } .ec-wobble-b{ transform-origin: 100% 0; } .ec-wobble,.ec-wobble-t,.ec-wobble-b { animation: wobblex 1s ease-in-out; } @keyframes wobblex { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } /*闪烁*/ @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .ec-rubber-band { animation: rubber-band 1s; } .ec-rubber-band-fast { animation: rubber-band .5s; } @keyframes rubber-band { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } to { transform: scale3d(1, 1, 1); } } /*仿挂钟振铃效果*/ .ec-shake-time{ animation: shake-time 1s ease; } @keyframes shake-time { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } /*弹跳变化*/ .ec-bounce{ animation: bounce 1s ease; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } /*震动*/ .ec-shake { animation: shake .5s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } /*反射率进入*/ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .ec-fade-in { animation: fade-in 1s; } @keyframes ec-fade-in-b { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } } .ec-fade-in-b { animation: ec-fade-in-b 1s; } @keyframes ec-fade-in-l { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } } .ec-fade-in-l { animation: ec-fade-in-l 1s; } @keyframes ec-fade-in-r { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } } .ec-fade-in-r { animation: ec-fade-in-r 1s; } @keyframes ec-fade-in-t { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } .ec-fade-in-t { animation: ec-fade-in-t 1s; } @keyframes ec-fade-out { from { opacity: 1; } to { opacity: 0; } } .ec-fade-out { animation: ec-fade-out 1s; } @keyframes ec-fade-out-b { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); } } .ec-fade-out-b { animation: ec-fade-out-b 1s; } @keyframes ec-fade-out-l { from { opacity: 1; } to { opacity: 0; transform: translate3d(-100%, 0, 0); } } .ec-fade-out-l { animation: ec-fade-out-l 1s; } @keyframes ec-fade-out-r { from { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0, 0); } } .ec-fade-out-r { animation: ec-fade-out-r 1s; } @keyframes ec-fade-out-t { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, -100%, 0); } } .ec-fade-out-t { animation: ec-fade-out-t 1s; } /*旋转进出*/ @keyframes rotate-in{ 0%{opacity:0;transform:rotate(-200deg);} 100%{opacity:1;transform:rotate(0);} } .ec-rotate-in { animation: rotate-in 1s; } @keyframes rotate-in-lt{ 0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;} 100%{transform-origin:left bottom;transform:rotate(0);opacity:1;} } .ec-rotate-in-lt { animation: rotate-in-lt 1s; } @keyframes rotate-in-lb{ 0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;} 100%{transform-origin:left bottom;transform:rotate(0);opacity:1;} } .ec-rotate-in-lb { animation: rotate-in-lb 1s; } @keyframes rotate-in-rt{ 0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;} 100%{transform-origin:right bottom;transform:rotate(0);opacity:1;} } .ec-rotate-in-rt { animation: rotate-in-rt 1s; } @keyframes rotate-in-rb{ 0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;} 100%{transform-origin:right bottom;transform:rotate(0);opacity:1;} } .ec-rotate-in-rb { animation: rotate-in-rb 1s; } .ec-rotate-out { animation: rotate-out 1s; } @keyframes rotate-out{ 0%{transform-origin:center center;transform:rotate(0);opacity:1;} 100%{transform-origin:center center;transform:rotate(200deg);opacity:0;} } .ec-rotate-out-lt { animation: rotate-out-lt 1s; } @keyframes rotate-out-lt{ 0%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;} } .ec-rotate-out-lb { animation: rotate-out-lb 1s; } @keyframes rotate-out-lb{ 0%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;} } .ec-rotate-out-rt { animation: rotate-out-rt 1s; } @keyframes rotate-out-rt{ 0%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;} } .ec-rotate-out-rb { animation: rotate-out-rb 1s; } @keyframes rotate-out-rb{ 0%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;} } /*扭动进出*/ @keyframes flip-in-x { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } .ec-flip-in-x { animation: flip-in-x 1s; } @keyframes flip-in-y { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } } .ec-flip-in-y { animation: flip-in-y 1s; } @keyframes flip-out-x { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .ec-flip-out-x { animation: flip-out-x 1s; } @keyframes flip-out-y { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .ec-flip-out-y { animation: flip-out-y 1s; } @keyframes light-speed-in { from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); opacity: 1; } to { transform: none; opacity: 1; } } .ec-light-speed-in { animation: light-speed-in 1s ease-out; } @keyframes light-speed-out { from { opacity: 1; } to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .ec-light-speed-out { animation: light-speed-out ease-in 1s; } /*Infiniti次数施行动画*/ .ec-infinite{ animation-iteration-count: infinite; } .ec-alternate { animation-direction: alternate; }

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
/*动画效果*/
.ec-bounce-in-l {
    animation: bounce-in-l 1s ease;
}
@keyframes bounce-in-l {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }
    75% {
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        transform: translate3d(5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}
.ec-bounce-in-r {
    animation: bounce-in-r 1s ease;
}
@keyframes bounce-in-r {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        transform: translate3d(10px, 0, 0)
    }
    90% {
        transform: translate3d(-5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}
.ec-bounce-in-b{
    animation: bounce-in-b 1s;
}
.ec-bounce-in-t{
    animation: bounce-in-t 1s;
}
@keyframes bounce-in-t {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
 
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }
 
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }
 
    75% {
        transform: translate3d(0, -10px, 0);
    }
 
    90% {
        transform: translate3d(0, 5px, 0);
    }
 
    to {
        transform: none;
    }
}
@keyframes bounce-in-b{
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
 
    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }
 
    60% {
        opacity: 1;
        transform: translate3d(0, -25px, 0);
    }
 
    75% {
        transform: translate3d(0, 10px, 0);
    }
 
    90% {
        transform: translate3d(0, -5px, 0);
    }
 
    to {
        transform: none;
    }
}
@keyframes bounce-out-b {
    20% {
        transform: translate3d(0, 10px, 0);
    }
 
    40%, 45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }
 
    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }
}
 
.ec-bounce-out-b {
    animation: bounce-out-b 1s;
}
 
@keyframes bounce-out-l {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0);
    }
 
    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
}
 
.ec-bounce-out-l {
    animation: bounce-out-l 1s;
}
 
@keyframes bounce-out-r {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0);
    }
 
    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}
 
.ec-bounce-out-r {
    animation: bounce-out-r 1s;
}
 
@keyframes bounce-out-t {
    20% {
        transform: translate3d(0, -10px, 0);
    }
 
    40%, 45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);
    }
 
    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }
}
 
.ec-bounce-out-t {
    animation: bounce-out-t 1s;
}
 
/*心跳效果*/
.ec-pulse {
    animation: pulse 1s linear;
}
.ec-pulse-shrink {
    animation: pulse .5s linear;
}
@keyframes pulse {
    25% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.9);
    }
}
.ec-flash {
    animation: flash .5s ease;
}
/*摇摆*/
.ec-swing {
    animation: swing .5s ease;
}
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0);
    }
}
/*摇摆*/
.ec-wobble-t{
    transform-origin: 0 100%;
}
 
.ec-wobble-b{
    transform-origin: 100% 0;
}
 
.ec-wobble,.ec-wobble-t,.ec-wobble-b {
    animation: wobblex 1s ease-in-out;
}
 
@keyframes wobblex {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}
/*闪烁*/
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
.ec-rubber-band {
    animation: rubber-band 1s;
}
.ec-rubber-band-fast {
    animation: rubber-band .5s;
}
@keyframes rubber-band {
    from {
        transform: scale3d(1, 1, 1);
    }
 
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
 
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
 
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
 
    65% {
        transform: scale3d(.95, 1.05, 1);
    }
 
    75% {
        transform: scale3d(1.05, .95, 1);
    }
 
    to {
        transform: scale3d(1, 1, 1);
    }
}
/*仿闹钟振铃效果*/
.ec-shake-time{
    animation: shake-time 1s ease;
}
 
@keyframes shake-time {
    0% {
        transform: scale(1);
    }
    10%, 20% {
        transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}
 
/*弹跳变化*/
.ec-bounce{
    animation: bounce 1s ease;
}
 
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}
 
/*震动*/
.ec-shake {
    animation: shake .5s ease;
}
 
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}
/*透明度进入*/
@keyframes fade-in {
    from {
        opacity: 0;
    }
 
    to {
        opacity: 1;
    }
}
 
.ec-fade-in {
    animation: fade-in 1s;
}
 
@keyframes ec-fade-in-b {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
 
    to {
        opacity: 1;
        transform: none;
    }
}
 
.ec-fade-in-b {
    animation: ec-fade-in-b 1s;
}
 
@keyframes ec-fade-in-l {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
 
    to {
        opacity: 1;
        transform: none;
    }
}
 
.ec-fade-in-l {
    animation: ec-fade-in-l 1s;
}
 
@keyframes ec-fade-in-r {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
 
    to {
        opacity: 1;
        transform: none;
    }
}
 
.ec-fade-in-r {
    animation: ec-fade-in-r 1s;
}
 
@keyframes ec-fade-in-t {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
 
    to {
        opacity: 1;
        transform: none;
    }
}
 
.ec-fade-in-t {
    animation: ec-fade-in-t 1s;
}
 
@keyframes ec-fade-out {
    from {
        opacity: 1;
    }
 
    to {
        opacity: 0;
    }
}
 
.ec-fade-out {
    animation: ec-fade-out 1s;
}
 
@keyframes ec-fade-out-b {
    from {
        opacity: 1;
    }
 
    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}
 
.ec-fade-out-b {
    animation: ec-fade-out-b 1s;
}
 
@keyframes ec-fade-out-l {
    from {
        opacity: 1;
    }
 
    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}
 
.ec-fade-out-l {
    animation: ec-fade-out-l 1s;
}
 
 
@keyframes ec-fade-out-r {
    from {
        opacity: 1;
    }
 
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}
 
.ec-fade-out-r {
    animation: ec-fade-out-r 1s;
}
 
@keyframes ec-fade-out-t {
    from {
        opacity: 1;
    }
 
    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}
 
.ec-fade-out-t {
    animation: ec-fade-out-t 1s;
}
/*旋转进出*/
@keyframes rotate-in{
    0%{opacity:0;transform:rotate(-200deg);}
    100%{opacity:1;transform:rotate(0);}
}
.ec-rotate-in {
    animation: rotate-in 1s;
}
@keyframes rotate-in-lt{
    0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lt {
    animation: rotate-in-lt 1s;
}
@keyframes rotate-in-lb{
    0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lb {
    animation: rotate-in-lb 1s;
}
@keyframes rotate-in-rt{
    0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rt {
    animation: rotate-in-rt 1s;
}
@keyframes rotate-in-rb{
    0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rb {
    animation: rotate-in-rb 1s;
}
 
.ec-rotate-out {
    animation: rotate-out 1s;
}
@keyframes rotate-out{
    0%{transform-origin:center center;transform:rotate(0);opacity:1;}
    100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
}
.ec-rotate-out-lt {
    animation: rotate-out-lt 1s;
}
@keyframes rotate-out-lt{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
}
.ec-rotate-out-lb {
    animation: rotate-out-lb 1s;
}
@keyframes rotate-out-lb{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rt {
    animation: rotate-out-rt 1s;
}
@keyframes rotate-out-rt{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rb {
    animation: rotate-out-rb 1s;
}
@keyframes rotate-out-rb{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
}
/*翻转进出*/
@keyframes flip-in-x {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
 
    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }
 
    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
 
    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
 
    to {
        transform: perspective(400px);
    }
}
 
.ec-flip-in-x {
    animation: flip-in-x 1s;
}
 
@keyframes flip-in-y {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
 
    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }
 
    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
 
    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
 
    to {
        transform: perspective(400px);
    }
}
 
.ec-flip-in-y {
    animation: flip-in-y 1s;
}
 
@keyframes flip-out-x {
    from {
        transform: perspective(400px);
    }
 
    30% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }
 
    to {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}
 
.ec-flip-out-x {
    animation: flip-out-x 1s;
}
 
@keyframes flip-out-y {
    from {
        transform: perspective(400px);
    }
 
    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }
 
    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}
 
.ec-flip-out-y {
    animation: flip-out-y 1s;
}
 
@keyframes light-speed-in {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
 
    60% {
        transform: skewX(20deg);
        opacity: 1;
    }
 
    80% {
        transform: skewX(-5deg);
        opacity: 1;
    }
 
    to {
        transform: none;
        opacity: 1;
    }
}
 
.ec-light-speed-in {
    animation: light-speed-in 1s ease-out;
}
 
@keyframes light-speed-out {
    from {
        opacity: 1;
    }
 
    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}
 
.ec-light-speed-out {
    animation: light-speed-out ease-in 1s;
}
/*无限次数执行动画*/
.ec-infinite{
    animation-iteration-count: infinite;
}
 
.ec-alternate {
    animation-direction: alternate;
}

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

声明

1.上面将会见到很七个像样彩世界网址 21这么的矩形,都以span标签,样式都是提交的css

span{ cursor: pointer; height: 40px; line-height: 40px; text-align: center; display: inline-block; color: #333; background: #ccc; min-width: 80px; padding: 0 10px; margin: 10px; }

1
2
3
4
5
6
7
8
9
10
11
12
span{
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        color: #333;
        background: #ccc;
        min-width: 80px;
        padding: 0 10px;
        margin: 10px;
    }

2.有关class命超形式,l代表left,r代表right,t代表top,b代表bottom,c代表center,m代表middle。切记

小说相比较长,可是说得便是两点,咱们看得也相应会比十分的快
1.写出有个别hover动画和预设动画的运作效果,况兼贴出代码
2.发觉多少个卡通组成,和增加Infiniti动画,反向动画,会有不同的功效,而且接二连三商讨,看下能或不可能切磋出不等同的东西!

100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}

6.小结

好了,css3的代码库封装到这里就大概了,要是您能看完全篇,你曾经是勇士了,评释你很有耐心,看完马上精通,这一个对于豪门来说难点不大,毕竟不是怎样逻辑性强的代码。笔者想要的效率就算都落到实处了,不过随后料定也是要修改完善的(最少看源码的话,小编自个儿看得都有一点点乱,可是不经常之间又不知底该假使重新整建,就先放上去了)。话说回来,通过上述的案例,希望能帮到大家,最奇妙正是能起到分散思维的效应,便是经过笔者的案例,能让我们知晓其余的片段动画如何是好,或许想到有哪些窘迫动画效果。web前端这一行,最关键的即是多练,大家除了看人家的品类,博客之外,一定要多练,多写,那样发展才会越来越快,知识才会记得更牢。
末段,假如我们感到自家哪个地方写得不得了大概写错了,应接提议。有啥好的主见,随即给你宝贵的提议笔者!项目自身也置于github上边了!有亟待的能够去看下,star下ec-css!

1 赞 9 收藏 评论

彩世界网址 22

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

2-1-3筋斗角度变化

彩世界网址 23

html

<pre class="lang:default decode:true"> <span class="ech-grow-rotate-l">grow-rotate-l</span> <span class="ech-grow-rotate-r">grow-rotate-r</span> <span class="ech-rotate5">rotate5</span> <span class="ech-rotate15">rotate15</span> <span class="ech-rotate30">rotate30</span> <span class="ech-rotate60">rotate60</span> <span class="ech-rotate90">rotate90</span> <span class="ech-rotate180">rotate180</span> <span class="ech-rotate360">rotate360</span> <span class="ech-rotate-5">rotate-5</span> <span class="ech-rotate-15">rotate-15</span> <span class="ech-rotate-30">rotate-30</span> <span class="ech-rotate-60">rotate-60</span> <span class="ech-rotate-90">rotate-90</span> <span class="ech-rotate-180">rotate-180</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<pre class="lang:default decode:true">
<span class="ech-grow-rotate-l">grow-rotate-l</span>
<span class="ech-grow-rotate-r">grow-rotate-r</span>
<span class="ech-rotate5">rotate5</span>
<span class="ech-rotate15">rotate15</span>
<span class="ech-rotate30">rotate30</span>
<span class="ech-rotate60">rotate60</span>
<span class="ech-rotate90">rotate90</span>
<span class="ech-rotate180">rotate180</span>
<span class="ech-rotate360">rotate360</span>
<span class="ech-rotate-5">rotate-5</span>
<span class="ech-rotate-15">rotate-15</span>
<span class="ech-rotate-30">rotate-30</span>
<span class="ech-rotate-60">rotate-60</span>
<span class="ech-rotate-90">rotate-90</span>
<span class="ech-rotate-180">rotate-180</span>

css

.ech-grow-rotate-l,.ech-grow-rotate-r, .ech-rotate5, .ech-rotate15, .ech-rotate30, .ech-rotate60, .ech-rotate90, .ech-rotate180, .ech-rotate360, .ech-rotate-5,.ech-rotate-15, .ech-rotate-30, .ech-rotate-60, .ech-rotate-90, .ech-rotate-180{ transition: all .4s; } .ech-grow-rotate-l:hover { transform: scale(1.1) rotate(4deg); } .ech-grow-rotate-r:hover { transform: scale(1.1) rotate(-4deg); } .ech-rotate-5:hover { transform: rotate(-5deg); } .ech-rotate-15:hover { transform: rotate(-15deg); } .ech-rotate-30:hover { transform: rotate(-30deg); } .ech-rotate-60:hover { transform: rotate(-60deg); } .ech-rotate-90:hover { transform: rotate(-90deg); } .ech-rotate-180:hover { transform: rotate(-180deg); } .ech-rotate5:hover { transform: rotate(5deg); } .ech-rotate15:hover { transform: rotate(15deg); } .ech-rotate30:hover { transform: rotate(30deg); } .ech-rotate60:hover { transform: rotate(60deg); } .ech-rotate90:hover { transform: rotate(90deg); } .ech-rotate180:hover { transform: rotate(180deg); } .ech-rotate360:hover { transform: rotate(360deg); }

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
.ech-grow-rotate-l,.ech-grow-rotate-r, .ech-rotate5, .ech-rotate15, .ech-rotate30, .ech-rotate60, .ech-rotate90, .ech-rotate180, .ech-rotate360, .ech-rotate-5,.ech-rotate-15, .ech-rotate-30, .ech-rotate-60, .ech-rotate-90, .ech-rotate-180{
transition: all .4s;
}
.ech-grow-rotate-l:hover {
    transform: scale(1.1) rotate(4deg);
}
.ech-grow-rotate-r:hover {
    transform: scale(1.1) rotate(-4deg);
}
.ech-rotate-5:hover {
    transform: rotate(-5deg);
}
.ech-rotate-15:hover {
    transform: rotate(-15deg);
}
 
.ech-rotate-30:hover {
    transform: rotate(-30deg);
}
 
.ech-rotate-60:hover {
    transform: rotate(-60deg);
}
 
.ech-rotate-90:hover {
    transform: rotate(-90deg);
}
 
.ech-rotate-180:hover {
    transform: rotate(-180deg);
}
.ech-rotate5:hover {
    transform: rotate(5deg);
}
.ech-rotate15:hover {
    transform: rotate(15deg);
}
 
.ech-rotate30:hover {
    transform: rotate(30deg);
}
 
.ech-rotate60:hover {
    transform: rotate(60deg);
}
 
.ech-rotate90:hover {
    transform: rotate(90deg);
}
 
.ech-rotate180:hover {
    transform: rotate(180deg);
}
 
.ech-rotate360:hover {
    transform: rotate(360deg);
}

/* Hover */
@-webkit-keyframes hover {
50% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}

2-1.粗略动画

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

4-3.组成功效

黑影效果和任何功能的三结合,(gif看不出阴影效果,哎。。)
彩世界网址 24

下面的多少个的栗子
css代码不改变,差距是html代码,多加了部分类名
彩世界网址 25

地点多少个是自家在支付时候发掘的栗子,那个笔者会继续研商,也盼望我们能探讨,切磋出什么风趣的功效,也许动画片写法,迎接分享!

.pulse-grow {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-grow:hover, .pulse-grow:focus, .pulse-grow:active {
-webkit-animation-name: pulse-grow;
animation-name: pulse-grow;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}

2-3-4摇摆效果

彩世界网址 26

html

JavaScript

<span class="ech-swing">swing</span>

1
<span class="ech-swing">swing</span>

css

.ech-swing:hover { animation: swing .5s ease alternate; } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.ech-swing:hover {
    animation: swing .5s ease alternate;
}
 
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0);
    }
}

/* Hollow */
.hollow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: background;
transition-property: background;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
/* Hack to improve aliasing on mobile/tablet devices */
}
.hollow:hover, .hollow:focus, .hollow:active {
background: none;
}

2-1-6影子变化

彩世界网址 27

(gif图看得效果太掉价了,大家可以去github下载看)

html

JavaScript

<span class="ech-shadow">shadow</span> <span class="ech-shadow-in">shadow-in</span> <span class="ech-shadow-write">shadow-write</span> <span class="ech-shadow-big">shadow-big</span>

1
2
3
4
<span class="ech-shadow">shadow</span>
<span class="ech-shadow-in">shadow-in</span>
<span class="ech-shadow-write">shadow-write</span>
<span class="ech-shadow-big">shadow-big</span>

css

.ech-shadow,.ech-shadow-in,.ech-shadow-write,.ech-shadow-big{ transition: all .4s; } .ech-shadow:hover { box-shadow: 0 0 10px #333; } .ech-shadow-in:hover { box-shadow: inset 0 0 10px #333; } .ech-shadow-write:hover { box-shadow: inset 0 0 20px #fff; } .ech-shadow-big:hover { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); transform: scale(1.1); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.ech-shadow,.ech-shadow-in,.ech-shadow-write,.ech-shadow-big{
    transition: all .4s;
}
.ech-shadow:hover {
    box-shadow: 0 0 10px #333;
}  
.ech-shadow-in:hover {
    box-shadow: inset 0 0 10px #333;
}
.ech-shadow-write:hover {
    box-shadow: inset 0 0 20px #fff;
}
.ech-shadow-big:hover {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}

/* Shadow Radial */
.shadow-radial {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.shadow-radial:before, .shadow-radial:after {
pointer-events: none;
position: absolute;
content: '';
left: 0;
width: 100%;
box-sizing: border-box;
background-repeat: no-repeat;
height: 5px;
opacity: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
.shadow-radial:before {
bottom: 100%;
background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial:after {
top: 100%;
background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial:hover:before, .shadow-radial:focus:before, .shadow-radial:active:before, .shadow-radial:hover:after, .shadow-radial:focus:after, .shadow-radial:active:after {
opacity: 1;
}

1.前言

在月首的时候,发了CSS3热身实战–过渡与动画(达成炫彩下拉,手风琴,无缝滚动)。js的代码库也发过三回,两篇文章。从前也写了css3的热身实战,既然热身完了,是时候起头封装css3的代码库了,相比较起js的代码库,css3的代码库的逻辑性就更是简约了!能够说借使打上注释和一张效果图就足以让我们知晓了内部的原理了!
自己写代码库的时候,动画效果主假若参照了多个开源项目,nec,hover.css,animate.css那多少个类型的身分不行的高,建议大家去打听。
源码已经嵌入github下边了,大家能够去看,也接待我们star一下!ec-css。

自家提出那多个库并非叫大家去拿别人的代码,稍微修改一下,或然间接拷贝到自身的品种上,然后就视为自身的花色。笔者是让大家去看外人的代码,学习外人的贯彻格局只怕动画片效果,然后再用本人的点子贯彻,当然假若把外人的种类,增加和删除改查到万象更新的境地,那么些作者个人以为能够说是自身的类型了!重申一点,不要一直复制旁人的代码,放到本身的项目上,然后正是自个儿支付的,那是不重申外人的战果,对团结的技艺水平提高的援救也少之甚少。作者写文章,尽管也会付给代码,可是作者的目标是提供大家参照他事他说加以考察的,希望给让大家学习到文化照旧发散思维,写出更加好的小说。从前也说过,我写文章的目的是授人以渔,不是授人以鱼

66.6% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}

@keyframes pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

83.25% {
-webkit-transform: translate(1px, -1px);
transform: translate(1px, -1px);
}

@keyframes buzz {
50% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

/* Curl Bottom Left */
.curl-bottom-left {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-bottom-left:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
bottom: 0;
left: 0;
background: white;
/* IE9 */
background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-bottom-left:hover:before, .curl-bottom-left:focus:before, .curl-bottom-left:active:before {
width: 25px;
height: 25px;
}

100% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
opacity: .4;
}
}

/* Skew */
.skew {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew:hover, .skew:focus, .skew:active {
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

.wobble-bottom {
display: inline-block;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-bottom:hover, .wobble-bottom:focus, .wobble-bottom:active {
-webkit-animation-name: wobble-bottom;
animation-name: wobble-bottom;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

100% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}

100% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

33.3% {
-webkit-transform: translate(-6px, 6px);
transform: translate(-6px, 6px);
}

<a href="#" class="button border-fade">Border Fade</a>
<a href="#" class="button hollow">Hollow</a>
<a href="#" class="button trim">Trim</a>
<a href="#" class="button outline-outward">Outline Outward</a>
<a href="#" class="button outline-inward">Outline Inward</a>
<a href="#" class="button round-corners">Round Corners</a>

83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}

100% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}

40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}

@keyframes hover {
50% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}

30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

@keyframes hover-shadow {
0% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
opacity: .4;
}

.wobble-vertical {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-vertical:hover, .wobble-vertical:focus, .wobble-vertical:active {
-webkit-animation-name: wobble-vertical;
animation-name: wobble-vertical;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

@keyframes wobble-skew {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

@keyframes wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}

<script type="text/javascript" src=";

/* Hover Shadow */
@-webkit-keyframes hover {
50% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

/* BORDER TRANSITIONS */
/* Border Fade */
.border-fade {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
/* Hack to improve aliasing on mobile/tablet devices */
}
.border-fade:hover, .border-fade:focus, .border-fade:active {
box-shadow: inset 0 0 0 4px #666666, 0 0 1px rgba(0, 0, 0, 0);
/* Hack to improve aliasing on mobile/tablet devices */
}

100% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}

49.95% {
-webkit-transform: translate(4px, -4px);
transform: translate(4px, -4px);
}

/* Outline Outward */
.outline-outward {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.outline-outward:before {
content: '';
position: absolute;
border: #e1e1e1 solid 4px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left;
}
.outline-outward:hover:before, .outline-outward:focus:before, .outline-outward:active:before {
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
}

</head>
<body>
<h1> Hover.css </h1>

66.6% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}

/* Float Shadow */
.float-shadow {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
.float-shadow:hover, .float-shadow:focus, .float-shadow:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
/* move the element up by 5px */
}
.float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);
/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

49.95% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}

/* Pulse Grow */
@-webkit-keyframes pulse-grow {
to {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

/* Wobble Vertical */
@-webkit-keyframes wobble-vertical {
16.65% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}

@keyframes hang {
50% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
}

20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}

/* Wobble Top */
@-webkit-keyframes wobble-top {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

49.95% {
-webkit-transform: translate(4px, -4px);
transform: translate(4px, -4px);
}

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

50% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
opacity: 1;
}

/* Wobble To Top Right */
@-webkit-keyframes wobble-to-top-right {
16.65% {
-webkit-transform: translate(8px, -8px);
transform: translate(8px, -8px);
}

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

<h2>Shadow and Glow Transitions</h2>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<meta name="keywords" content="">
<meta name="description" content="">
<title>css3Hover</title>

100% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}

/* CURLS */
/* Curl Top Left */
.curl-top-left {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-left:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
top: 0;
left: 0;
background: white;
/* IE9 */
background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
/*For IE7-8-9*/
z-index: 1000;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-left:hover:before, .curl-top-left:focus:before, .curl-top-left:active:before {
width: 25px;
height: 25px;
}

.hang {
display: inline-block;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hang:hover, .hang:focus, .hang:active {
-webkit-transform: translateY(6px);
transform: translateY(6px);
-webkit-animation-name: hang;
animation-name: hang;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}

100% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
opacity: .4;
}
}

49.95% {
-webkit-transform: translate(4px, 4px);
transform: translate(4px, 4px);
}

33.3% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

75% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}

@keyframes wobble-bottom {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

/* Bubble Float Bottom */
.bubble-float-bottom {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-bottom:before {
position: absolute;
z-index: -1;
content: '';
left: calc(50% - 10px);
bottom: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #e1e1e1 transparent transparent transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: bottom;
transition-property: bottom;
}
.bubble-float-bottom:hover, .bubble-float-bottom:focus, .bubble-float-bottom:active {
-webkit-transform: translateY(-5px) translateZ(0);
transform: translateY(-5px) translateZ(0);
}
.bubble-float-bottom:hover:before, .bubble-float-bottom:focus:before, .bubble-float-bottom:active:before {
bottom: -10px;
}

<a href="#" class="button glow">Glow</a>
<a href="#" class="button box-shadow-outset">Box Shadow Outset</a>
<a href="#" class="button box-shadow-inset">Box Shadow Inset</a>
<a href="#" class="button float-shadow">Float Shadow</a>
<a href="#" class="button hover-shadow">Hover Shadow</a>
<a href="#" class="button shadow-radial">Shadow Radial</a>

.pulse-shrink {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-shrink:hover, .pulse-shrink:focus, .pulse-shrink:active {
-webkit-animation-name: pulse-shrink;
animation-name: pulse-shrink;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}

/* Push */
@-webkit-keyframes push {
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}

100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}

/* Bubble Left */
.bubble-left {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-left:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: left;
transition-property: left;
top: calc(50% - 10px);
left: 0;
border-width: 10px 10px 10px 0;
border-color: transparent #e1e1e1 transparent transparent;
}
.bubble-left:hover:before, .bubble-left:focus:before, .bubble-left:active:before {
left: -10px;
}

/* Wobble Bottom */
@-webkit-keyframes wobble-bottom {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

.buzz {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz:hover, .buzz:focus, .buzz:active {
-webkit-animation-name: buzz;
animation-name: buzz;
-webkit-animation-duration: 0.15s;
animation-duration: 0.15s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}

/* Trim */
.trim {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.trim:before {
content: '';
position: absolute;
border: white solid 4px;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
opacity: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
.trim:hover:before, .trim:focus:before, .trim:active:before {
opacity: 1;
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

/* Rotate */
.rotate {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.rotate:hover, .rotate:focus, .rotate:active {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}

/* 2D TRANSITIONS */
/* Grow */
.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover, .grow:focus, .grow:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

 

率先说说宽容性的主题材料呢,主要说说IE浏览器的包容性。IE10 。

66.6% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}

<h2>Border Transitions</h2>

83.25% {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}

/* Pulse */
@-webkit-keyframes pulse {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

.wobble-to-bottom-right {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-to-bottom-right:hover, .wobble-to-bottom-right:focus, .wobble-to-bottom-right:active {
-webkit-animation-name: wobble-to-bottom-right;
animation-name: wobble-to-bottom-right;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}

66.6% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}

@keyframes buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}

83.25% {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}

.hover-shadow {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hover-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
.hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
-webkit-animation-name: hover;
animation-name: hover;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.hover-shadow:hover:before, .hover-shadow:focus:before, .hover-shadow:active:before {
opacity: .4;
-webkit-transform: translateY(6px);
transform: translateY(6px);
-webkit-animation-name: hover-shadow;
animation-name: hover-shadow;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}

@keyframes hover {
50% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}

83.25% {
-webkit-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}

.wobble-horizontal {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-horizontal:hover, .wobble-horizontal:focus, .wobble-horizontal:active {
-webkit-animation-name: wobble-horizontal;
animation-name: wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

<h2>Speech Bubbles</h2>

100% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
}
}

/* Round Corners */
.round-corners {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: border-radius;
transition-property: border-radius;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.round-corners:hover, .round-corners:focus, .round-corners:active {
border-radius: 1em;
}

html代码:

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

33.3% {
-webkit-transform: translate(-6px, -6px);
transform: translate(-6px, -6px);
}

.wobble-top {
display: inline-block;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-top:hover, .wobble-top:focus, .wobble-top:active {
-webkit-animation-name: wobble-top;
animation-name: wobble-top;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

/* Buzz Out */
@-webkit-keyframes buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

100% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
}
}

100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}

.wobble-to-top-right {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-to-top-right:hover, .wobble-to-top-right:focus, .wobble-to-top-right:active {
-webkit-animation-name: wobble-to-top-right;
animation-name: wobble-to-top-right;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}

/* Wobble Horizontal */
@-webkit-keyframes wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}

100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

<!-- SCRIPT BEGIN -->

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

@keyframes wobble-to-top-right {
16.65% {
-webkit-transform: translate(8px, -8px);
transform: translate(8px, -8px);
}

/* Pulse Shrink */
@-webkit-keyframes pulse-shrink {
to {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}

40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}

/* Hang */
@-webkit-keyframes hang {
50% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}

20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}

66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}

66.6% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}

.hover {
display: inline-block;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hover:hover, .hover:focus, .hover:active {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
-webkit-animation-name: hover;
animation-name: hover;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}

50% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
opacity: 1;
}

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

/* Wobble Skew */
@-webkit-keyframes wobble-skew {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

/* Box Shadow Inset */
.box-shadow-inset {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
/* Hack to improve aliasing on mobile/tablet devices */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.box-shadow-inset:hover, .box-shadow-inset:focus, .box-shadow-inset:active {
box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
/* Hack to improve aliasing on mobile/tablet devices */
}

83.25% {
-webkit-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}

83.25% {
-webkit-transform: translate(1px, -1px);
transform: translate(1px, -1px);
}

<link rel="stylesheet" type="text/css" href="css3Hover.css">

/* Box Shadow Outset */
.box-shadow-outset {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.box-shadow-outset:hover, .box-shadow-outset:focus, .box-shadow-outset:active {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}

100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}

<div id="effects">

@keyframes pulse-grow {
to {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

100% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}

/* Grow Rotate */
.grow-rotate {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow-rotate:hover, .grow-rotate:focus, .grow-rotate:active {
-webkit-transform: scale(1.1) rotate(4deg);
transform: scale(1.1) rotate(4deg);
}

/* Shrink */
.shrink {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.shrink:hover, .shrink:focus, .shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

/* Bubble Right */
.bubble-right {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-right:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: right;
transition-property: right;
top: calc(50% - 10px);
right: 0;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #e1e1e1;
}
.bubble-right:hover:before, .bubble-right:focus:before, .bubble-right:active:before {
right: -10px;
}

<a href="#" class="button curl-top-left">Curl Top Left</a>
<a href="#" class="button curl-top-right">Curl Top Right</a>
<a href="#" class="button curl-bottom-right">Curl Bottom Right</a>
<a href="#" class="button curl-bottom-left">Curl Bottom Left</a>

/* Wobble To Bottom Right */
@-webkit-keyframes wobble-to-bottom-right {
16.65% {
-webkit-transform: translate(8px, 8px);
transform: translate(8px, 8px);
}

@-webkit-keyframes hover-shadow {
0% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
opacity: .4;
}

<h2>2D Transforms</h2>

<!-- SCRIPT END -->

</div>
</body>
</html>

/* Skew Backward */
.skew-backward {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew-backward:hover, .skew-backward:focus, .skew-backward:active {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}

/* Skew Forward */
.skew-forward {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew-forward:hover, .skew-forward:focus, .skew-forward:active {
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
}

75% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}

功能体现的css代码:

30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

/* Bubble Float Top */
.bubble-float-top {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-top:before {
position: absolute;
z-index: -1;
content: '';
left: calc(50% - 10px);
top: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #e1e1e1 transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top;
transition-property: top;
}
.bubble-float-top:hover, .bubble-float-top:focus, .bubble-float-top:active {
-webkit-transform: translateY(5px) translateZ(0);
transform: translateY(5px) translateZ(0);
}
.bubble-float-top:hover:before, .bubble-float-top:focus:before, .bubble-float-top:active:before {
top: -10px;
}

.pulse {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse:hover, .pulse:focus, .pulse:active {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

/* Outline Inward */
.outline-inward {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.outline-inward:before {
pointer-events: none;
content: '';
position: absolute;
border: #e1e1e1 solid 4px;
top: -16px;
right: -16px;
bottom: -16px;
left: -16px;
opacity: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left;
}
.outline-inward:hover:before, .outline-inward:focus:before, .outline-inward:active:before {
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
opacity: 1;
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

<h2>Curls</h2>

83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}

.pop {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pop:hover, .pop:focus, .pop:active {
-webkit-animation-name: pop;
animation-name: pop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

/* Bubble Float Left */
.bubble-float-left {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-left:before {
position: absolute;
z-index: -1;
content: '';
top: calc(50% - 10px);
left: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #e1e1e1 transparent transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: left;
transition-property: left;
}
.bubble-float-left:hover, .bubble-float-left:focus, .bubble-float-left:active {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
.bubble-float-left:hover:before, .bubble-float-left:focus:before, .bubble-float-left:active:before {
left: -10px;
}

33.3% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}

60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}

66.6% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}

@keyframes pulse-shrink {
to {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}

100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}

/* Pop */
@-webkit-keyframes pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

/* Curl Bottom Right */
.curl-bottom-right {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-bottom-right:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
bottom: 0;
right: 0;
background: white;
/* IE9 */
background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-bottom-right:hover:before, .curl-bottom-right:focus:before, .curl-bottom-right:active:before {
width: 25px;
height: 25px;
}

33.3% {
-webkit-transform: translate(-6px, -6px);
transform: translate(-6px, -6px);
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

.button {
margin: .4em;
padding: 1em;
cursor: pointer;
background: #e1e1e1;
text-decoration: none;
color: #666666;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.glow:hover, .glow:focus, .glow:active {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.buzz-out {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz-out:hover, .buzz-out:focus, .buzz-out:active {
-webkit-animation-name: buzz-out;
animation-name: buzz-out;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

@keyframes pulse {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

<a href="#" class="button grow">Grow</a>
<a href="#" class="button shrink">Shrink</a>
<a href="#" class="button pulse">Pulse</a>
<a href="#" class="button pulse-grow">Pulse Grow</a>
<a href="#" class="button pulse-shrink">Pulse Shrink</a>
<a href="#" class="button push">Push</a>
<a href="#" class="button pop">Pop</a>
<a href="#" class="button rotate">Rotate</a>
<a href="#" class="button grow-rotate">Grow Rotate</a>
<a href="#" class="button float">Float</a>
<a href="#" class="button sink">Sink</a>
<a href="#" class="button hover">Hover</a>
<a href="#" class="button hang">Hang</a>
<a href="#" class="button skew">Skew</a>
<a href="#" class="button skew-forward">Skew Forward</a>
<a href="#" class="button skew-backward">Skew Backward</a>
<a href="#" class="button wobble-horizontal">Wobble Horizontal</a>
<a href="#" class="button wobble-vertical">Wobble Vertical</a>
<a href="#" class="button wobble-to-bottom-right">Wobble To Bottom Right</a>
<a href="#" class="button wobble-to-top-right">Wobble To Top Right</a>
<a href="#" class="button wobble-top">Wobble Top</a>
<a href="#" class="button wobble-bottom">Wobble Bottom</a>
<a href="#" class="button wobble-skew">Wobble Skew</a>
<a href="#" class="button buzz">Buzz</a>
<a href="#" class="button buzz-out">Buzz Out</a>

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

@keyframes wobble-to-bottom-right {
16.65% {
-webkit-transform: translate(8px, 8px);
transform: translate(8px, 8px);
}

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

/* SPEECH BUBBLES */
/* Bubble Top */
.bubble-top {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-top:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top;
transition-property: top;
left: calc(50% - 10px);
top: 0;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #e1e1e1 transparent;
}
.bubble-top:hover:before, .bubble-top:focus:before, .bubble-top:active:before {
top: -10px;
}

本文由时时app平台注册网站发布于web前端,转载请注明出处:编写自己的代码库:CSS3 常用动画的实现彩世界网

关键词: