CSS3动画和自适应
动画
animation属性实现动画主要由两个部分组成：1、通过类似Flash动画的关键帧来声明一个动画，2、在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果，代码例下：
<style>
div {
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst 5s linear 2s infinite alternate;
/* 特殊值infinite 表示无限次播放 ，alternate表示偶数次逆向播放 起始被视为第0次*/
}
@keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
自适应
使用@media可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。 以下实例中在屏幕可视窗口尺寸小于 600 像素的设备上修改li的样式:
