在经历了看过就忘的阶段,很多老前端大鸟门都能手写各种css动画效果,只有小菜鸟还在网上找效果,复制修改,不明白其原理和用法,就知道COPY!那么福利来了,闲暇之余来学个CSS动画animation吧!
一个简单小案例让你学会CSS动画animation,让页面炫酷起来!-Qui-Note

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>

效果如下图:
一个简单小案例让你学会CSS动画animation,让页面炫酷起来!-Qui-Note

上面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

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

一个简单小案例让你学会CSS动画animation,让页面炫酷起来!-Qui-Note

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

animation: rotate 1.5s infinite alternate;

效果如下:
一个简单小案例让你学会CSS动画animation,让页面炫酷起来!-Qui-Note

案例代码结束,这个案例就是一个简单的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:...
一个简单小案例让你学会CSS动画animation,让页面炫酷起来!-Qui-Note

End!累死,终于写完了!