CSS3动画快速实现

在工作或者平时做demo中，经常会遇到做一些简单的动画。初级前端同学可能就会有些棘手了。

在这里我发现了一个网上笔记实用且简单易上手的动画库。与大家共享一下：

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

 

首先来一个摇一摇：

css代码：

 /*base code*/
 .animated {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
 }
 .animated.infinite {
 -webkit-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
 }
 .animated.hinge {
 -webkit-animation-duration: 2s;
 animation-duration: 2s;
 }
 /*the animation definition*/
 @-webkit-keyframes shake {
 0%, 100% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0)
 }
 10%,
 30%,
 50%,
 70%,
 90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0)
 }
 20%,
 40%,
 60%,
 80% {
 -webkit-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0)
 }
 }
 @keyframes shake {
 0%, 100% {
 -webkit-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0)
 }
 10%,
 30%,
 50%,
 70%,
 90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 -ms-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0)
 }
 20%,
 40%,
 60%,
 80% {
 -webkit-transform: translate3d(10px, 0, 0);
 -ms-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0)
 }
 }
 .shake:hover {
 -webkit-animation-name: shake;
 animation-name: shake
 }

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

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