CSS3d动画 animation 属性

来源：互联网发布：excel数据自动更新编辑：程序博客网时间：2024/05/15 11:25

CSS3 animation 属性

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
【另外】跟animation有关的其他属性
（1）animation-fill-mode : none (默认)| backwards | forwards | both 设置动画开始之前和结束之后的行为（测试结
果不是很清晰）
（2）animation-play-state: running（默认） | paused 设置动画的运行状态

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值：none 0 ease 0 1 normal继承性：no版本：CSS3JavaScript 语法：object.style.animation="mymove 5s infinite"

语法

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

值描述animation-name规定需要绑定到选择器的 keyframe 名称。。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画。

实例

使用简写属性，将动画与 div 元素绑定：

<style> div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/}@keyframes mymove{from {left:0px;}to {left:200px;}}@-webkit-keyframes mymove /*Safari and Chrome*/{from {left:0px;}to {left:200px;}}</style></head><body><p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p><div></div>

CSS3 animation-timing-function 属性

定义和用法

animation-timing-function 规定动画的速度曲线。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

默认值：ease继承性：no版本：CSS3JavaScript 语法：object.style.animationTimingFunction="linear"

语法

animation-timing-function: value;

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

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

在这个表中，还有几个属性是没有列出来的，即step-end , step-start , steps()，他们是以一帧一帧的显示动画，这在部分动画中有着重要的意义。animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的。ease，linear、cubic-bezier之类的过渡函数都会为其插入补间。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式。
这三个值的属性各不同。先看示例：

<style type="text/css">    @-webkit-keyframes changeColor{        from,to{background: red;}        20% {background: blue;}        60% {background: black;}    }    #animation_show div{        width: 100px;        height: 100px;        display: inline-block;    }</style><div id='animation_show'>    linear效果:<div style='-webkit-animation:changeColor 10s infinite linear;'></div>    step-start效果:<div style='-webkit-animation:changeColor 10s infinite step-start;'></div>    step-end效果:<div style='-webkit-animation:changeColor 10s infinite step-end;'></div>    steps()效果:<div style='-webkit-animation:changeColor 10s infinite steps(3,start);'></div></div>

由动画显示结果可以看到，其中的差别仅仅是animation-timing-function，可以看出：

step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画，

即在20%(background: blue;)到60%(background: black;)之间，显示的是60%的效果(background: black;)

step-end与上面相反，都是以上一帧的显示效果来填充间隔动画，

即在20%(background: blue;)到60%(background: black;)之间，显示的是20%的效果(background: blue;)

而steps()指定了一个阶跃函数，它可以传入两个参数：

第一个参数指定了时间函数中的间隔数量（必须是正整数），将间隔动画等分成指定数目的小间隔动画，然后根据第二个参数来决定显示效果。

第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。第二个参数设置后其实和step-start，step-end同义，在分成的小间隔动画中判断显示效果。

可以看出：

steps(1, start) 等于step-start，动画分成1步，动画执行时为开始左侧端点的部分为开始；

steps(1,end)等于step-end，动画分成一步，动画执行时以结尾端点为开始，默认值为end。

最核心的一点就是：timing-function 作用于每两个关键帧之间，而不是整个动画。

对steps第一个参数的错误的理解：

例如steps(5，start)，steps() 第一个参数 number 为指定的间隔数，即把动画分为 n 步阶段性展示，估计大多数人理解就是keyframes写的变化次数，

@-webkit-keyframes circle {        0% {}        25%{}        50%{}        75%{}        100%{} }

keyframes的关键帧是只有2个规则的时候，假如我们有一张400px长度的CSS sprites雪碧图

<pre name="code" class="css">@-webkit-keyframes circle {        0% {background-position-x: 0;}        100%{background-position-x: -400px;} }

steps() 第一个参数 number 为指定的间隔数，即把动画分为 n 步阶段性展示，估计大多数人理解就是keyframes中的0% 25% 50% 75% 100% 分成5个间隔等分。此刻设置steps(5，start）那么会发现5张图会出现帧动画的效果，因为steps中的5把 0% – 100%的规则，内部分成5个等分。

@-webkit-keyframes circle {        0% {background-position-x: 0;}        25% {background-position-x: -100px;}        50% {background-position-x:-200px;}        75%{background-position-x: -300px;}        100%{background-position-x: -400px;} }

将这个规则稍微修改下，加入一个50%的状态。

@-webkit-keyframes circle {        0% {background-position-x: 0;}        50% {background-position-x: -200px;}        100%{background-position-x: -400px;} }

那么同样用steps(5，start）效果就会乱套。此刻你会很迷惑，所以关键要理解第一个参数的针对点，首先引入一个核心点：
timing-function 作用于每两个关键帧之间，而不是整个动画。那么第一个参数很好理解了，steps的设置都是针对两个关键帧之间的，而非是整个keyframes，所以第一个参数对 - 次数对应了每次steps的变化。换句话说也是 0-25 之间变化5次， 25-50之间变化5次，50-75 之间变化5次，以此类推。

例如:

CSS3 animation-iteration-count 属性

定义和用法

animation-iteration-count 属性定义动画的播放次数。

默认值：1继承性：no版本：CSS3JavaScript 语法：object.style.animationIterationCount=3

语法

animation-iteration-count: n|infinite;

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

CSS3 animation-direction 属性

定义和用法

animation-direction 属性定义是否应该轮流反向播放动画。

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

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

默认值：normal继承性：no版本：CSS3JavaScript 语法：object.style.animationDirection="alternate"

语法

animation-direction: normal|alternate;

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

CSS3 animation-fill-mode 属性

定义和用法

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

语法

animation-fill-mode : none | forwards | backwards | both;

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

CSS3 animation-play-state 属性

定义和用法

animation-play-state 属性规定动画正在运行还是暂停。

语法

animation-play-state: paused|running;

值描述测试paused规定动画已暂停。测试running规定动画正在播放。测试

实例

暂停动画：

<style> div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s;animation-play-state:paused;/* Safari and Chrome */-webkit-animation:mymove 5s;-webkit-animation-play-state:paused;}@keyframes mymove{from {left:0px;}to {left:200px;}}@-webkit-keyframes mymove /* Safari and Chrome */{from {left:0px;}to {left:200px;}}</style></head><body><div></div>

转自w3school，http://www.cnblogs.com/cyITtech/p/3777552.html，http://www.cnblogs.com/aaronjs/p/4642015.html

0 0