css3 keyframes zoom,CSS3 @keyframes 规则

亲自试一试 - 实例

实例 1

在一个动画中添加多个 keyframe 选择器：

@keyframes mymove

{

0% {top:0px;}

25% {top:200px;}

50% {top:100px;}

75% {top:200px;}

100% {top:0px;}

}

@-moz-keyframes mymove /* Firefox */

{

0% {top:0px;}

25% {top:200px;}

50% {top:100px;}

75% {top:200px;}

100% {top:0px;}

}

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

{

0% {top:0px;}

25% {top:200px;}

50% {top:100px;}

75% {top:200px;}

100% {top:0px;}

}

@-o-keyframes mymove /* Opera */

{

0% {top:0px;}

25% {top:200px;}

50% {top:100px;}

75% {top:200px;}

100% {top:0px;}

}

实例 2

在一个动画中改变多个 CSS 样式：

@keyframes mymove

{

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

100% {top:200px; background:yellow; width:300px;}

}

@-moz-keyframes mymove /* Firefox */

{

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

100% {top:200px; background:yellow; width:300px;}

}

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

{

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

100% {top:200px; background:yellow; width:300px;}

}

@-o-keyframes mymove /* Opera */

{

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

100% {top:200px; background:yellow; width:300px;}

}

实例 3

带有多个 CSS 样式的多个 keyframe 选择器：

@keyframes mymove

{

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

25% {top:0px; left:100px; background:blue;}

50% {top:100px; left:100px; background:yellow;}

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

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

}

@-moz-keyframes mymove /* Firefox */

{

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

25% {top:0px; left:100px; background:blue;}

50% {top:100px; left:100px; background:yellow;}

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

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

}

@-webkit-keyframes mymove /* Safari and Chrome */

{

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

25% {top:0px; left:100px; background:blue;}

50% {top:100px; left:100px; background:yellow;}

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

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

}

@-o-keyframes mymove /* Opera */

{

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

25% {top:0px; left:100px; background:blue;}

50% {top:100px; left:100px; background:yellow;}

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

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

}