想要完成一段简单的动画,首先要了解一个名为@keyframes的css3的新特性

下面是一个使一个方块横向移动的示例
css

@keyframes move 
{
from {left:0px;}
to {left:200px;}
};

#mydiv
{
  width:100px;
  height:100px;
  background:black;
  position:relative;
  animation:  move 3s infinite;
}

html

<div id="mydiv"></div>

关于@keyframes

这是用于描述动画过程的属性,除了可以使用from和to,还能通过百分比来进行更加精细的动画

#mydiv2
{
  width:100px;
  height:100px;
  background:black;
  position:relative;
  animation:  move2 3s infinite;

}

@keyframes move2 
{
0% {left:0px;}
20% {background: red}
40% {top: -20px}
60% {width: 200px}
100% {left:200px;}
}

html

<div id="mydiv2"></div>

关于animation

animation 属性是一个简写属性,用于设置六个动画属性:

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