CSS3動畫快速實現

在工做或者平時作demo中，常常會遇到作一些簡單的動畫。初級前端同窗可能就會有些棘手了。

在這裏我發現了一個網上筆記實用且簡單易上手的動畫庫。與你們共享一下：

更多請查看： http://anicollection.github.io/

 

首先來一個搖一搖：

css代碼：

 1 /*base code*/
 2 .animated {
 3 -webkit-animation-duration: 1s;
 4 animation-duration: 1s;
 5 -webkit-animation-fill-mode: both;
 6 animation-fill-mode: both;
 7 }
 8 .animated.infinite {
 9 -webkit-animation-iteration-count: infinite;
10 animation-iteration-count: infinite;
11 }
12 .animated.hinge {
13 -webkit-animation-duration: 2s;
14 animation-duration: 2s;
15 }
16 /*the animation definition*/
17 @-webkit-keyframes shake {
18 0%, 100% {
19 -webkit-transform: translate3d(0, 0, 0);
20 transform: translate3d(0, 0, 0)
21 }
22 10%,
23 30%,
24 50%,
25 70%,
26 90% {
27 -webkit-transform: translate3d(-10px, 0, 0);
28 transform: translate3d(-10px, 0, 0)
29 }
30 20%,
31 40%,
32 60%,
33 80% {
34 -webkit-transform: translate3d(10px, 0, 0);
35 transform: translate3d(10px, 0, 0)
36 }
37 }
38 @keyframes shake {
39 0%, 100% {
40 -webkit-transform: translate3d(0, 0, 0);
41 -ms-transform: translate3d(0, 0, 0);
42 transform: translate3d(0, 0, 0)
43 }
44 10%,
45 30%,
46 50%,
47 70%,
48 90% {
49 -webkit-transform: translate3d(-10px, 0, 0);
50 -ms-transform: translate3d(-10px, 0, 0);
51 transform: translate3d(-10px, 0, 0)
52 }
53 20%,
54 40%,
55 60%,
56 80% {
57 -webkit-transform: translate3d(10px, 0, 0);
58 -ms-transform: translate3d(10px, 0, 0);
59 transform: translate3d(10px, 0, 0)
60 }
61 }
62 .shake:hover {
63 -webkit-animation-name: shake;
64 animation-name: shake
65 }

 

html:

<div class="shake animated" style="height:200px;width:200px;background:red;border:1px solid blue;margin:30px auto">
    鼠標放上來搖一搖
</div>

 

鼠標放上去 圖片會左右晃動起來 週期爲2秒

用法：

只須要將你須要的效果相關的動畫css拷貝到你的css文件中，而後在html中加上一個class屬性，動畫就加上了。

這麼容易就實現了， 我也試一試