1分钟深入了解CSS3的动画属性animation

拖好久的animation…温馨提示，先看效果，代码附在讲解后

上篇说到@keyframe可以定义动画，animation就是将@keyframe所定义好的动画添加在元素身上。

animation可以传8个参数，常用的有6个，动画名称（@keyframe定义好的），执行时长，动画类型（默认ease），执行延时时常（默认0），动画循环次数（默认1），运动方向（默认normal）

对定义动画有问题移步@keyframe，执行和执行延时时长也木得问题，重点讲动画类型、动画循环次数、运动方向

1.动画类型

动画类型的属性值与transition相同，ease，linear，ease-in，ease-out，ease-in-out，cubic-bezier，step-start，step-end，steps(num,[ start | end ] )，除了step系列，其余在transition中和贝塞尔曲线中讲过CSS3过渡属性transition详解、贝塞尔曲线，那么就来康康step系列吧

（1）steps(num, start / end)

知识点1：num表示该动画的上一关键帧到下一关键帧分几步完成，步数越多动画越细腻，举个例子吧，图1为linear属性值的动画效果，图2为属性值为steps(1, end)的动画效果。

知识点2：end与start的区别。end表示保留当前帧状态，直到这一关键帧动画结束，忽略最后一帧的效果（由图1图2对照可知最后一帧绿色没有显示），配合使用forwards，可以看到最后一帧，如图3

start保留下一段帧状态，直到这段一关键帧动画结束，忽略第一帧的状态，如图4，没有显示第一帧的黄色，一般不常使用start

再举一个分4步执行一个关键帧的例子，如图5

（2）step-end与step-start

step-end相当于steps(1, end)，step-start相当于steps(1, start)

2.动画循环次数

可以填num / infinite，num表示确定循环多少次，infinite表示循环无数次

3.运动方向

可以填normal(默认)，reverse(反方向)，alternate(正方向->反方向->正方向)，alternate-reverse(反方向->正方向->反方向)，与infinite配合使用，举例alternate，如图6，其中小方块在左下角停留没有移动到左上角就是因为end忽略最后一帧的问题

以上所有例子代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}@keyframes run {0% {left: 0;top: 0;background-color: #ffb;}25% {left: 100px;top: 0;background-color: #fbf;}50% {left: 100px;top: 100px;background-color: #bff;}75% {left: 0px;top: 100px;background-color: #fbb;}100% {left: 0px;top: 0px;background-color: #bfb;}}.wrapper {width: 200px;height: 200px;border: 1px solid #000;position: absolute;left: 100px;top: 100px;}.demo {position: absolute;width: 100px;height: 100px;background-color: #bbf;}.run {/* animation: run 4s linear infinite; *//* animation: run 4s steps(1,end); *//* animation: run 4s steps(4,end); *//* end + forwards *//* animation: run 4s steps(1,end) forwards; *//* animation: run 4s step-end; *//* animation: run 4s steps(1,start) alternate; */animation: run 4s steps(1,end) infinite alternate;}button {position: absolute;width: 50px;height: 25px;line-height: 25px;top: -26px;left: -1px;}</style>
</head><body><div class="wrapper"><div class="demo"></div><button>run</button></div></body>
<script>var demo = document.getElementsByClassName('demo')[0];var runBtn = document.getElementsByTagName('button')[0];runBtn.onclick = function () {demo.classList += " run";}
</script></html>

我的承诺兑现啦，动画结束后，CSS3的内容剩transform了

但是暂时不打算更CSS3了，一方面博主已经学到bootstrap啦~~~，另一方面其实博主自己也没搞很明白呢，感觉讲不清楚，个人觉得虽然效果很炫酷吧，但是不是很常用的样子呀，所以拖一拖，以后再更吧

所以接下来直接更bootstrap了，加油啦！