创建动画：@keyframes规则。
方式一：from{属性：值} to{属性：值}
2
创建动画
方式二：0%{属性：值} 100%{属性：值}
0% 是动画的开始，100% 是动画的完成。可以在二者之间加入25%，50%等。
3
将动画绑定到选择器：
在样式中，设置动画属性animation，自定义动画名称和时长。
animation：动画名 时长；
此时就可以完成一个简单的动画了，要进行更多设置还需要其他属性。
4
规定动画开始时的等待时间：
animation-delay：时间；可以为秒、毫秒2s，2ms。
5
播放次数：
animation-iteration-count：次数；
永久播放的值取infinite。
6
动画速度曲线：
animation-timing-function：变化类型；
变化类型有：linear 匀速；ease-in 开始慢；ease-out 结束慢；ease 动画有一个缓慢的开始，然后快，结束慢。
外围容器给固定宽度，不指定高度或高度auto（此时需要设置overflow:hidden）。例：
.photoContainer { width:700px}
.photoContainer li { width:200pxheight:200pxmargin:10px 0 0 10pxoverflow:hiddenfloat:left}
.photoContainer li img { width:180pxheight:180px}
<ul class="photoContainer">
<li><a href="#" target="_blank"><img src="images/1.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/2.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/3.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/1.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/2.jpg" ></a></li>
<li><a href="#" target="_blank"><img src="images/3.jpg" ></a></li>
</ul>
就是上面说的那样啊。
外围容器给固定宽度，不指定高度或高度auto（此时需要设置overflow:hidden）。
在css设置可改变大小的div滚动条样式方法：
1.首先新建html文档，进入代码书写界面。
2.在</head>和<body>的里面写入代码，在<div>里面写入想要输入的内容</div>。
3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}
这里主要是设置外层轨道的形状和颜色。
4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}
这里主要是设置内层轨道的形状和颜色。
5.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。
