探索前端奇思妙想：CSS3动画库研究与实践

1. css动画 

 1.1 浏览器兼容性

1.2 属性

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。

1.2.1 @keyframes

@keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到某个元素。

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

通过使用关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成）），设置了样式改变。也可以使用百分比值。通过使用百分比，可以根据需要添加任意多个样式更改。

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

 1.2.2 元素其他属性

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;//其他动画属性
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: 3;   //infinite
  animation-direction: reverse;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

animation-name 将元素与动画绑定。

animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s。

animation-delay 属性规定动画开始的延迟时间。负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

animation-iteration-count 属性指定动画应运行的次数。为"infinite" 时动画永远持续下去。

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。animation-direction 属性可接受以下值：

1. normal - 动画正常播放（向前）。默认值
2. reverse - 动画以反方向播放（向后）
3. alternate - 动画先向前播放，然后向后
4. alternate-reverse - 动画先向后播放，然后向前

animation-timing-function 属性规定动画的速度曲线。animation-timing-function 属性可接受以下值：

1. ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
2. linear - 规定从开始到结束的速度相同的动画
3. ease-in - 规定慢速开始的动画
4. ease-out - 规定慢速结束的动画
5. ease-in-out - 指定开始和结束较慢的动画
6. cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。animation-fill-mode 属性可接受以下值：

1. none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
2. forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
3. backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
4. both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

动画属性简写

div {
  animation: example 5s linear 2s infinite alternate;
}

2. Animate.css

animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

只兼容支持 CSS3 animate 属性的浏览器：IE10+、Firefox、Chrome、Opera、Safari。

下载地址：https://github.com/daneden/animate.css

2.1 引入文件

<link rel="stylesheet" href="路径+animate.min.css">

 2.2 使用

<div class="animated bounce" id="dowebok"></div>

animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。给元素加上 class 后，刷新页面，就能看到动画效果了。

有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：

$(function(){
    $('#dowebok').addClass('animated bounce');
    setTimeout(function(){
        $('#dowebok').removeClass('bounce');
    }, 1000);
});

animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：

#dowebok {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}
//注意添加浏览器前缀

3. csshake

csshake是一个能够震动和晃动‘DOM’的CSS类集合。

演示： http://elrumordelaluz.github.io/csshake/#1

下载链接：https://github.com/elrumordelaluz/csshake.git

3.1 引入文件

<link rel="stylesheet" type="text/css" href="csshake.min.css">

3.2 使用

<div class="shake"></div>

添加class就能看到动画效果了，shake是其中一种。

添加class: shake-constant，一直抖动

<div class="shake shake-constant"></div>

添加class: shake-constant shake-constant--hover，一直抖动，鼠标悬浮后停止抖动

<div class="shake shake-constant shake-constant--hover"></div>

添加class: shake-freeze，鼠标悬浮后开始抖动，鼠标离开停止抖动

<div class="shake shake-constant shake-constant--hover"></div>

4.anijs

官网： AniJS, A Library to Raise your Web Design without Coding

4.1 引入文件

<script src="anijs-min.js"></script>
------------
<link rel="stylesheet" href=" anicollection.css">

4.2 使用

<div data-anijs="if: mouseover, on: body, do: swing animated"></div>

有四处可以设置：

If:___, on:____, do____, to____

If some event(click, scroll, mouseover and more), On any element (css selector), Do some behavior(Rotate animation), To (any element).

指的是对某一元素(on)进行操作(if)，使某一元素(to)产生某种动画效果(do)。If与do为必须项，on和to为可选项。若未设置on或to，则效果默认展示在承载元素上。