@-webkit-keyframes 动画 css3

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称
规定动画的时长

例子：

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

div

{

animation: myfirst 5s;          /*IE*/

-moz-animation: myfirst 5s;	/* Firefox */

-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */

-o-animation: myfirst 5s;	/* Opera */

}

@keyframes myfirst     /*IE*/

{

0%   {background: red;}

25%  {background: yellow;}

50%  {background: blue;}

100% {background: green;}

}

@-moz-keyframes myfirst /* Firefox */

{

0%   {background: red;}

25%  {background: yellow;}

50%  {background: blue;}

100% {background: green;}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

0%   {background: red;}

25%  {background: yellow;}

50%  {background: blue;}

100% {background: green;}

}

@-o-keyframes myfirst /* Opera */

{

0%   {background: red;}

25%  {background: yellow;}

50%  {background: blue;}

100% {background: green;}

}

改变背景色和位置：

@keyframes myfirst

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-moz-keyframes myfirst /* Firefox */

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-o-keyframes myfirst /* Opera */

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

运行名为 myfirst 的动画，其中设置了所有动画属性：

div

{

animation-name: myfirst;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-play-state: running;

/* Firefox: */

-moz-animation-name: myfirst;

-moz-animation-duration: 5s;

-moz-animation-timing-function: linear;

-moz-animation-delay: 2s;

-moz-animation-iteration-count: infinite;

-moz-animation-direction: alternate;

-moz-animation-play-state: running;

/* Safari 和 Chrome: */

-webkit-animation-name: myfirst;

-webkit-animation-duration: 5s;

-webkit-animation-timing-function: linear;

-webkit-animation-delay: 2s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

-webkit-animation-play-state: running;

/* Opera: */

-o-animation-name: myfirst;

-o-animation-duration: 5s;

-o-animation-timing-function: linear;

-o-animation-delay: 2s;

-o-animation-iteration-count: infinite;

-o-animation-direction: alternate;

-o-animation-play-state: running;

}

巴特西

@-webkit-keyframes 动画 css3

最新文章

热门文章