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属性，动画就加上了。

这么容易就实现了， 我也试一试

转载于:https://www.cnblogs.com/kevinlvhsl/p/4989282.html