0%是动画的开始，100%是动画的结束。一样平常来说，为了得到浏览器更好地支持，我们要始终定义0%和100%。
举个例子，我们在动画开始的时候，定义一个div元素的背景色为赤色，动画到一半的时候，定义背景色为蓝色，动画结束的时候，背景色为黄色，怎么写这个动画规则？
@keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}}
一样平常来说，为了更好的适配浏览器，我们还要写几个浸染于不同浏览器的规则
1、浸染于Firefox浏览器
@-moz-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}}
2、浸染于Safari和Chrome浏览器
@-webkit-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}}
3、浸染于Opera浏览器
@-o-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}}
二、关于动画属性1、animation-name:规定动画的名称
2、animation-duration:规定动画完成一个周期的时长
3、animation-timing-function:规定动画的曲线速率
4、animation-delay:规定动画开始的韶光
5、animation-iteration-count:规定动画播放的次数
6、animation-direction:规定动画不才个周期是否反向播放
7、animation-play-state:规定动画是否正在运行或停息
888、animation:简写属性，将上边1—6的属性在一个表达式中表示，可以减少N多事情量。
最主要的一点，动画规则只有捆绑到某个选择器上，动画才生效。意思一看都明白，关键是要多练习实际敲几次代码运行下效果，这里我就不再累赘了。
三、图片滚动效果实战1、摆上我们用来演示的图片。
<body>
<p>图片无缝滚动</p>
<ul id=\"大众list\"大众>
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>
</body>
2、加上CSS样式
{margin:0; padding: 0;}
p{
margin:0 auto;
text-align: center;
font-size:30px;
}
#wrap{
width:610px;
height:130px;
border:1px solid #000;
position: relative;
margin:100px auto;
overflow: hidden;
}
#list{
position: absolute;
left:0;
top:0;
width:200%;
}
#list li{
width:120px;
height:130px;
border:1px solid red;
background: pink;
color:#fff;
text-align: center;
font-size:50px;
float:left;
list-style: none;
}
3、给ul加上动画效果。为了适配不同的浏览器，还要多添加几个animation属性
#list{
position: absolute;
left:0;
top:0;
width:200%;
animation:myfirst 8s linear infinite alternate;
-moz-animation:myfirst 8s linear infinite alternate;
-webkit-animation:myfirst 8s linear infinite alternate;
-o-animation:myfirst 8s linear infinite alternate;
}
好了，大家可以看一看详细效果咯。
四、个人感想熏染用CSS3实现图片滚动确实很轻松，效果也挺不错。还是最开始我说的，前期我们暂不必纠结到底JS方法好还是CSS3方法好，只要能把哀求的效果实现了就行，进步缘于一点一滴的实践与磨炼。
谨以此与大家共勉——一个奋斗在web开拓路上的小白
