[分享]css3怎么把图片做成动画

CSS3能够以各种形式帮助网站设计师，包括将静态图像转化为动画。下面我们就来学习一下如何将图片做成动画。

img{
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}
@keyframes example{
  0%{left:0px; top:0px;}
  50%{left:200px; top:0px;}
  100%{left:0px; top:0px;}
} 

上述代码包括两部分。首先，将img标签设置为相对定位，并定义一个名称为“example”的动画，作用于img元素，整个动画持续时间为4秒。接着，在@keyframes示例中，我们定义了动画的关键帧。在此示例中，我们以50%的速度将图像向右移动200个像素，然后在第100％处将其移回原始位置。CSS3通过将对象从一个状态转移到另一个状态来创建动画。

在CSS3中有很多动画属性可用。如，您还可以使用“animation-timing-function”定义动画的速度曲线，并使用“animation-delay”在动画开始之前增加延迟。

总的来说，CSS3使设计师能够以新的方式改进网站，包括将静态图像转化为动画。