CSS3 animation，transform

1. animation

1.1. 浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

Internet Explorer 9 以及更早的版本不支持 animation 属性。

1.2. 语法

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

1.2.1. animation-name

规定需要绑定到选择器的 keyframe 名称

1.2.1.1. @keyframe

@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}

1.2.1.1.1. 浏览器支持

目前浏览器都不支持 @keyframes 规则。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

1.2.1.1.2. 说明

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

1.2.2. animation-duration

规定完成动画所花费的时间，以秒或毫秒计

1.2.3. animation-timing-function

规定动画的速度曲线

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

1.2.4. animation-delay

规定在动画开始之前的延迟

1.2.5. animation-iteration-count

规定动画应该播放的次数

值	描述
n	定义动画播放次数的数值
infinite	规定动画应该无限次播放

1.2.6. animation-direction

规定是否应该轮流反向播放动画

如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。

注释：如果把动画设置为只播放一次，则该属性没有效果。

值	描述
normal	默认值。动画应该正常播放。
alternate	动画应该轮流反向播放。

2. 应用

文字从右往左移动

<html>
    <head>
        <style>
            *{
                position: relative;
            }
            @keyframes move {
                from{left:100px;}
                to{left:0px;}
            }
            @-webkit-keyframes move{
                from{left:100px;}
                to{left:0px;}
            }
            div{
                width:50px;
                animation: move 5s linear infinite;
                -webkit-animation: move 5s linear infinite;
            }

        </style>
    </head>
    <body>
        <div>
            <span>文字</span>
        </div>
    </body>
</html>

W.T.的博客

网页实现元素轮播