CSS3动画快速实现

在工作或者平时做demo中，经常会遇到做一些简单的动画。初级前端同学可能就会有些棘手了。
在这里我发现了一个网上笔记实用且简单易上手的动画库。与大家共享一下：
 
首先来一个摇一摇：
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属性，动画就加上了。
这么容易就实现了，我也试一试
posted @ 2015-11-23 18:23  搬运代码的农民  阅读(228)  评论(0)  编辑  收藏  举报