css3 keyframes zoom,CSS3 @keyframes 规则

使 div 元素匀速向下移动：

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-moz-animation:mymove 5s infinite; /* Firefox */

-webkit-animation:mymove 5s infinite; /* Safari and Chrome */

-o-animation:mymove 5s infinite; /* Opera */

}

@keyframes mymove

{

from {top:0px;}

to {top:200px;}

}

@-moz-keyframes mymove /* Firefox */

{

from {top:0px;}

to {top:200px;}

}

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

{

from {top:0px;}

to {top:200px;}

}

@-o-keyframes mymove /* Opera */

{

from {top:0px;}

to {top:200px;}

}

注释：本例在 Internet Explorer 中无效。

还可以有变形、缩放、旋转等动画

@keyframes rubberBand {

from {

transform: scale3d(1, 1, 1);

}

30% {

transform: scale3d(1.25, 0.75, 1);

}

40% {

transform: scale3d(0.75, 1.25, 1);

}

50% {

transform: scale3d(1.15, 0.85, 1);

}

65% {

transform: scale3d(.95, 1.05, 1);

}

75% {

transform: scale3d(1.05, .95, 1);

}

to {

transform: scale3d(1, 1, 1);

}

}