网页动画图像、Flash动画和JavaScript效果图，我们用最基本的CSS也可以实现。创建一个简单的gif动画。上图就是效果。

要用CSS3制作动画，您需要了解两个css属性。

其一是 @keyframes

，因为它定义了CSS样式和动画从当前样式逐渐转变为新样式的过程。为了浏览器兼容性，你需要在关键帧前加上-webkit-， -ms-或-moz-。

关键帧有两个属性，from和to。from的内容定义了动画开始的状态，并记录了动画结束的状态。@keyframes后面跟着动画的名称。您可以自定义名称。例如，如果我选择gifname，当页面上的标记元素使用动画时，它将被使用。

@-webkit-keyframes gifname to}from和to也可以表示为百分比，所以如果你使用百分比，你可以定义动画的内容要丰富得多。

@-webkit-keyframes gifname 25% 50% 100%}假设我在一个div元素上使用这个动画

我们刚刚在div元素中看到的动画是我们需要识别的第二个属性。动画是一堆属性的简写。考虑下面的代码：

动画：gifname 2s step-start 1s无限交替；这个实际上可以写成

animation-name: gifname;动画：2 s;animation-timing-function: step-start;animation-delay: 1;animation-iteration-count:无限；动画方向：备用；animation -name:动画名称

下面是引入@keyframes的动画的名称。

animation -duration:动画时长

单位可以是秒或毫秒。

animation -timing-function:动画过渡类型

属性值：默认为“ease”

线性：线性过渡。等价于贝塞尔曲线(0.0,0.0,1.0,1.0)

轻松过渡。等效于贝塞尔曲线(0.25,0.1,0.25,1.0)

ease-in:从慢到快。等效于贝塞尔曲线(0.42,0,1.0,1.0)

放松：从快到慢。等效于贝塞尔曲线(0,0,0.58,1.0)

从慢到快再到慢。等效于贝塞尔曲线(0.42,0,0.58,1.0)

cubic-bezier(n,n,n,n):它在cubic-bezier函数中的自身值。取值范围为0 ~ 1。

step-start:立即跳转到动画的每个结束帧的状态

animation -delay:动画延迟时间

默认值为0。

animation -iteration -count:动画循环次数

默认为1。属性值infinite表示无限次。

动画方向：动画是否在下一个循环中向后播放

属性值

Normal:法线方向

反向：向相反的方向跑

交替：动画正常运行，然后在相反的方向，连续交替

alternate-reverse:动画先向后播放，然后向前播放，连续交替播放

还有另外两个属性：

animation -fill-mode:设置动画播放后的效果

值：

none:初始样式不改变默认行为。

forward:动画播放结束后保持最后一个状态；

我向后倒，以确保我向后倒。

animation -play-state:检索或设置对象动画的状态

属性值

animation-play-state:running | paused;

running:跑

暂停：暂停

animation-play-state:暂停；当鼠标经过时，动画停止，鼠标移开，动画继续

现在我们已经完成了属性，让我们进入实践部分：

首先，准备我们需要的图像。我在这里用了9张图片。

我在九个li/li标签中放了九个图像。所有li标签都包含在ul标签中。然后我将ul放入div标记中，div被设置为图像的大小，并通过逐帧移动ul元素来使其动画化。

作为最后的手段，隐藏div元素之外的任何内容。这是文章开头的图片。

最重要的是，上面的代码：

！ DOCTYPE html lang='en'head meta charset='UTF-8' meta name='viewport' content='width=device-width ';的初始=1.0元http-equiv=' X-UA-Compatible”内容=“ie=边缘”titlecss动画/titlestyle *李# div #箱#箱丽丽img @keyframes myfirst11.1% 22.2% 33.3% 44.4% 55.5% 66.6% 77.7% 88.8% 100%} @-moz-keyframes我11.1% 22.2% 33.3% 44.4% 55.5% 66.6% 77.7% 88.8% 100%} @-webkit-keyframes我11.1% 22.2% 33.3% 44.4% 55.5% 66.6% 77.7% 88.8% 100%} @-o-keyframes歌剧我11.1% 22.2% 33.3% 44.4% 55.5% 66.6% 77.7% 88.8% 100%}/风格/headbodydiv id='div' ul id='box' liimg src='./img/o1.jpg'//liimg src='./img/o2.jpg'//liimg src='./img/o3.jpg'//liimg src='./img/o5.jpg'//liimg src='./img/o6.jpg'//liimg src='./img/o7.jpg'//liimg src='./img/o8.jpg'//liliimg src='./img/o8.jpg'//liliing src='./img/o9.jpg'/li /ul /div/body/html此动画不支持ie9或更早版本。