一个简单小案例让你学会CSS动画animation，让页面炫酷起来！

在经历了看过就忘的阶段，很多老前端大鸟门都能手写各种css动画效果，只有小菜鸟还在网上找效果，复制修改，不明白其原理和用法，就知道COPY！那么福利来了，闲暇之余来学个CSS动画animation吧！

animation基础知识

animation动画是css3中一个老属性了，与css2平滑过渡时代不同，animation是通过关键帧@keyframes来实现更为复杂的动画效果，将整个动画分割成100份，你可以指定任何一帧的效果。

css公式——注意还有其他的属性，下面是常用的属性！

animation: name | duration | timing-function | delay | iteration-count | direction ;

• name 规定选择器的 keyframe名字
• duration 规定完成动画时间，以秒或毫秒计
• timing-function 规定动画的速度曲线，详细见下面 ①
• delay 规定动画前延迟时间
• iteration-count 规定动画循环次数，详细见下面 ②
• direction 规定是否应该轮流反向播放动画，详细见下面 ③

①animation-timing-function  指定动画的速度曲线

• linear 动画从头到尾的速度是相同的
• ease 默认。动画以低速开始，然后加快，在结束前变慢
• ease-in 动画以低速开始
• ease-out 动画以低速结束
• ease-in-out 动画以低速开始和结束
• cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

②animation-iteration-count  循环次数

• n 指定循环次数
• infinite 指定动画无限循环

③animation-direction 是否循环交替反向播放动画

• normal 默认值。动画按正常播放
• reverse 动画反向播放
• alternate 动画应该轮流反向播放，动画结束之后会逆向执行动画，循环交替执行

重点案例

小案例来咯，别眨眼，请仔细反复看这部分内容：
请忘记上面的css动画公式！！！
请忘记上面的css动画公式！！！
请忘记上面的css动画公式！！！

看案例：

<style type="text/css">
.demo{width: 80px;height: 200px;border: 1px solid #333;position: relative;margin-right: 300px;float: left;nimation: rotate 1.5s infinite;}
.demo::before{content: "";width: 30px;height: 30px;border-radius: 30px;background: #007AFF;position: absolute;bottom: 0;left: 20px;}
@keyframes rotate{
            100%{transform: rotate(-360deg);}
}
</style>
<div class="demo-box">
        <div class="demo"></div>
</div>

效果如下图：

上面animation案例仅在demo上加入了“ animation: rotate 1.5s infinite;”，调用了指定的 rotate动画，然后元素就选择了起来！实际上css的animation动画也就2部分构成：

• 1.指定元素启用动画，指定动画名称；
• 2.@keyframes 关键帧执行动画；

注意：关键帧支持所有样式：width/height/color/font-size/transform....

原理上，只有你写了这两个，你的动画就成功了，元素就会动起来了！

........

为了让动画旋转起来好看一下，我们给demo加一个旋转中心的属性：

transform-origin: center 0; //x轴居中，y轴为0

这样我们的旋转元素就可以一直的转圈圈了，效果如下：

如果想正转一圈，逆向转一圈，...循环下去，就可以添加一个alternate交替反向执行动画

animation: rotate 1.5s infinite alternate;

效果如下：

案例代码结束，这个案例就是一个简单的css3的animation循环动画，我们在写的时候先不要考虑兼容浏览器的问题，先将效果实现，再考虑兼容问题，不然代码量过多，看着头疼！ 如果还没有学会，就反复看上面的案例就行了，css3的animation循环动画就这么简单！

完整代码：

<style type="text/css">
     .demo-box{width: 1200px;height: 600px;margin: 300px auto;}
    .demo{width: 80px;height: 200px;border: 1px solid #333;position: relative;margin-right: 300px;float: left;}
    .demo::before{content: "";width: 30px;height: 30px;border-radius: 30px;background: #007AFF;position: absolute;bottom: 0;left: 20px;}
    .alternate{animation: rotate 1.5s infinite alternate; transform-origin: center 0;}
    .rotate{animation: rotate 1.5s infinite; transform-origin: center 0;}
    .no-origin{animation: rotate 1.5s infinite;}
    @keyframes rotate{
    100%{transform: rotate(-360deg);}
    }
</style>
<div class="demo-box">
        <div class="demo alternate"></div>
        <div class="demo rotate"></div>
        <div class="demo no-origin"></div>
</div>

在线预览效果：https://course.51qux.com/animation

浏览器兼容
多浏览器兼容代码：-webkit-, -ms- , -moz- 
例如：-webkit-animation：...

End！累死，终于写完了！