文章目录

1. 1. animation
   1. 1.0.1. 关键帧语法
   2. 1.0.2. keyframes样例
   3. 1.0.3. animation属性
      1. 1.0.3.1. 引用css动画：

animation

关键帧语法

@KEYFRAMES写法
@keyframes IDENT

{
from { Properties：Properties value; }
Percentage { Properties：Properties value; }
to { Properties：Properties value; }
}

keyframes样例

@-webkit-keyframes 'wobble'
 {
0% { margin-left: 100px; background: green; }
40% { margin-left: 150px; background: orange; }
60% { margin-left: 75px; background: blue; }
100% { margin-left: 100px; background: red; }
}

animation属性

animation-name:’wobble’;（动画属性名）

animation-duration: 10s；(动画持续时间）

animation-timing-function: linear ；(动画频率)

animation-delay:2s；(动画延迟时间)

animation-iteration-count: 10 ；（动画重复次数 infinite 为无限）

animation-direction: alternate ；(动画是否返转)

animation-play-state: paused ；(动画是否停止 running默认)

animation-fill-mode:none | forwards | backwards | both；(动画结束后位置 both就是都有)

顺序是：name> duration> timing-fuction>delay>iteration>direction>play-state>fill-mode;

[贝塞尔曲线] (http://cubic-bezier.com/#.35,-0.26,.83,.67)

例子：
cubic-bezier(.67,-0.18,.83,.67)

引用css动画：

1.首先引入css文件；

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

2.然后你需要什么动画就以那个动画的名字加animated的形式添加类名；

例如我需要叫做tada的动画

<div id="wrap" class="tada animated"></div>