CSS3动画详解

标签：sed   use   alt   keyboard   nim   duration   css3动画   com   safari   

首先，老阮在他博客讲的很明白了（http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html），这里我来全面总结一下。

一、transition

　　注：transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。就不能是auto之类的值。。。

　　1.提出背景：正因为css之前没有时间轴，每个动作都是瞬间完成。所以，提出了transition的概念。

　　2.作用：就如单词字面意思：“过渡，转变”。

　　3.定义：transition是一个简写属性（transition: property duration timing-function delay;）。

　　　　（1）transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

　　　　　　transition-property: none（没有属性会获得过渡效果）|all（所有属性将获得过渡效果）|property（过渡效果的属性，多个时用逗号隔开）;

　　　　例如：指定宽应用过渡。

div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari 和 Chrome */
-o-transition-property:width; /* Opera */
}

　　　　（2）transition-duration属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

div
{
transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari 和 Chrome */
-o-transition-duration: 5s; /* Opera */
}

　　　　（3）transition-timing-function 属性规定过渡效果的速度曲线。

　　　　　　transition-timing-function: linear（线性，就是从头至尾匀速）|ease（慢-快-慢）|ease-in（慢速开始~匀速）|ease-out（匀速~慢速结束）|ease-in-out（慢速开始~匀速~慢速结束）|cubic-bezier(n,n,n,n)（在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。）|steps() 分步执行;

@keyframes animate {
  to {
    background-position: -3420px;
  }
}
.kai.animate {
  animation: animate 0.75s steps(19) infinite;
}

　　　　　（4）transition-delay 属性规定过渡效果何时开始。

div
{
transition-delay: 2s;
-moz-transition-delay: 2s; /* Firefox 4 */
-webkit-transition-delay: 2s; /* Safari 和 Chrome */
-o-transition-delay: 2s; /* Opera */
}

　　4.transition的优点在于简单易用，但是它有几个很大的局限。

　　　　（1）transition需要事件触发，所以没法在网页加载时自动发生。

　　　　（2）transition是一次性的，不能重复发生，除非一再触发。

　　　　（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

　　　　（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

这就是animation的提出背景>>

二、animation

animation: name（动画名字或none） duration（动画用时） timing-function（动画速度曲线） delay（延迟时间） iteration-count（播放次数） direction（规定是否应该轮流反向播放动画）;

　　　　1.animation-name 属性为 @keyframes 动画规定名称。

　　　　2.animation-duration属性规定动画所花费的时间，默认为o。

　　　　3.animation-timing-function 规定动画的速度曲线（与transition相同）。

　　　　4.animation-delay 属性定义动画何时开始（与transition相同）。

　　　　5.animation-iteration-count 属性定义动画的播放次数（n或infinite无线循环）。

　　　　6.animation-direction 属性定义是否应该轮流反向播放动画（normal正常，alternate轮流反向播放）。

　　　　7.animation-play-state 属性规定动画正在运行还是暂停（running动画正在运行，paused动画停止）。

　　　　8.animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

　　　　　　animation-fill-mode : none （不改变默认行为）| forwards（动画保持在结束状态） | backwards （动画回到第一帧状态）| both（forwards和backwards两者都有）;

注：只写chrome兼容写法

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

　　最后，keyboards定义关键帧

@-webkit-keyframes play {}

@-moz-keyframes play {}

@-ms-keyframes play {}

@-o-keyframes play {}

@keyframes play {}

CSS3动画详解

标签：sed   use   alt   keyboard   nim   duration   css3动画   com   safari   

原文地址：http://www.cnblogs.com/candy-Yao/p/7436006.html