css3过渡与动画

1、transition：过渡，在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

• transition-property：要过渡的属性，默认值all,可也是width,color等属性
• transition-duration：定义要过渡的时间，例如（2s）
• transition-transition-timing-function：定义过渡的方式，可选值 ease |  ease-in | ease-out | ease-in-out | linear  | cubic-bezier(n,n,n,n)  ，默认值为ease
• transition-delay：定义开始过渡延迟的时间，单位为秒

简写：

transition: <transition-property>  <transition-duration> <transition-timing-function> <transition-delay>;

注意：需要定义的过渡属性值发生变化才会出现动画。例如hover时改变属性值，点击时改变属性值等等。

 

2、animation：动画，通过animation我们可以使用关键帧指定元素的入场和出场效果。

     使用animation创建动画时，首先要使用@keyframes创建动画规则

     

@keyframes myfirst {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

或者

@keyframes myfirst {
    from   {background: red;}
    to  {background: yellow;}   
}

属性：

• animation-name：动画的名称，由@keyframes定义
• animation-duration：完成动画一个周期所用的时间
• animation-timing-function：规定动画的书读曲线
• animation-iteration-count：动画执行的次数，默认1次
• animation-direction：动画下一周期是否逆向地播放，默认"normal"
• animation-play-state：规定动画是否运行或暂停，默认"running"
• animation-fill-mode：规定动画时间之外的状态

animation-fill-mode的取值：

1. noe:不改变默认行为
2. forwards：动画完成时，保持在最后一帧的状态
3. backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
4. both：向前和向后填充模式都被应用。