在工作或者平时做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>
![](https://i-blog.csdnimg.cn/blog_migrate/002a0517378941b766fc8d76aff3b911.png)
鼠标放上去 图片会左右晃动起来 周期为2秒
用法:
只需要将你需要的效果相关的动画css拷贝到你的css文件中,然后在html中加上一个class属性,动画就加上了。
这么容易就实现了,
我也试一试