CSS3-animations

时间：2015-10-14 23:17:21 阅读：265 评论：0 收藏：0 [点我收藏+]

animations功能与 transitions功能相同，都是通过改变元素的属性值来实现动画效果的。它们的区别在于：使用transitions功能时只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果；而animations则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

语法　animation: namedurationtiming-functiondelayiteration-countdirection;

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

一、animation-name

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

语法　animation-name: keyframename|none;

值	描述
keyframename	规定需要绑定到选择器的 keyframe 的名称。
none	规定无动画效果（可用于覆盖来自级联的动画）。

二、animation-duration

animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。

语法　animation-duration: time;

值	描述
time	规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

三、animation-timing-function

animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。

语法　animation-timing-function: value;

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

四、animation-delay

animation-delay 属性定义动画何时开始。

语法　animation-delay: time;

值	描述
time	可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

五、animation-iteration-count

animation-iteration-count 属性定义动画的播放次数。默认值为１次，infinite为无限次。

语法animation-iteration-count: n|infinite;

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

六、animation-direction

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

语法animation-direction: normal|alternate;

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

如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。如果把动画设置为只播放一次（animation-iteration-count:１;），则该属性没有效果。默认值为normal。

七、animation-play-state

animation--play-state属性指定动画是否正在运行或已暂停。

语法　animation-play-state: paused | running;

值	描述
paused	指定暂停动画
running	指定正在运行的动画

八、animation-fill-mode

animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

值	描述
none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

九、@keyframes 规则

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。您可以改变任意多的样式任意多的次数。用%来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

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

值	说明
animationname	必需的。定义animation的名称。
keyframes-selector	必需的。动画持续时间的百分比。合法值： 0-100% from (和0%相同) to (和100%相同)
css-styles	必需的。一个或多个合法的CSS样式属性

值

说明

animationname

必需的。定义animation的名称。

keyframes-selector

必需的。动画持续时间的百分比。

合法值：

0-100%
from (和0%相同)
to (和100%相同)

css-styles

必需的。一个或多个合法的CSS样式属性

示例：

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

Keyframes定义好了以后，还不能产生动画效果，需要把它捆绑到某个选择器。示例：

-moz-animation: mymove5s;
-webkit-animation: mymove 5s;
-o-animation: mymove 5s;
-ms-animation: mymove 5s;
animation: mymove 5s;

CSS3-animations

原文：http://www.cnblogs.com/weihf/p/4878878.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)