CSS3中的动画功能之transtions和animations详解

CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果。

一.Transitions

语法:transition: property duration timing-function

  • property: 表示对哪个属性进行平滑过渡(可设置为all,则所有属性值变化时均产生动画效果)
  • duration: 表示在多长时间内完成属性值的平滑过渡
  • timing-function: 表示通过什么方法来进行平滑过渡(具体值下面详细介绍)

样例代码:

transition: background-color 1s linear;

可同时设置多个属性值:

样例代码:

transition: background-color 1s linear, color 1s linear, width 1s linear;

可同时设置所有属性值:

样例代码:

transition: all 1s linear;

二 .Animations

语法:animation: name duration timing-function iteration-count;

  • name: 关键帧集合名(通过此名创建关键帧的集合,见下面样例代码)
  • duration: 表示在多长时间内完成属性值的平滑过渡
  • timing-function: 表示通过什么方法来进行平滑过渡(具体值下面详细介绍)
  • iteration-count: 迭代循环次数,可设置为具体数值,或者设置为infinite进行无限循环,默认为1

样例代码:

.box {
    background-color: red;
    -webkit-animation: mycolor 4s linear infinite;
 }
 @-webkit-keyframes mycolor {
     0% {
        background-color: red;
     }
     40% {
         background-color: darkblue;
     }
     70% {
        background-color: yellow;
     }
     100% {
        background-color: green;
     }
 }

 三.实现动画的方法

  • linear                      在动画开始时到结束时以同样的速度进行改变
  • ease-in                   动画开始时速度很慢,然后速度沿曲线值加速
  • ease-out                 动画开始时速度很快,然后速度沿曲线值减速
  • ease                        动画开始速度很慢,然后速度沿曲线值加速,然后再沿曲线值减速
  • ease-in-out            同ease

注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。