关键帧 例如：
调用关键帧：
语法 animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
animation-name 由 @keyframes 创建的动画名称
animation-duration过渡时间
animation-timing-function过渡方式
animation-delay延迟时间
animation-iteration-count 动画的播放次数 通常值为1次 特殊值infinite为无限播放
animation-direction动画的播放方向，alternate为偶数次向前播放，normal动画每次都是循环向前播放
练习如下：
该图形的变化从左上角到右上角来回跳动的一个过程
linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
perspective:500px透视 也可以理解为视距，可以理解为 你的眼睛距离物体的距离 距离物体越近 物体就越大，距离物体越远 物体就越小
transform: rotateZ(30deg) rotateZ是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转
transform: rotateY(30deg) rotateY是绕着y轴旋转 正值是向里面旋转 负值是向外面旋转
transform: rotateX(30deg)rotateX是绕着x轴旋转 正值是向里面旋转 负值是向外面旋转
transform: rotate(30deg)参数a取正值时元素相对原来中心顺时针旋转
transform: translate3d(0, 0, 200px)效果如下:
translate3d(0,0,200px) 表示z轴向前移动二楼200px（近大远小的原理）
translate3d 里面分别表示x轴距离 y轴距离 和z轴距离
要想实现3d效果必须要在父元素上加上一个属性perspective
如果想让子元素有3d的效果 必须要给父元素设置transform-style，默认值是flat， 想变成3d效果要把值设置成preserve-3d
也可以 设置旋转后的div的上下位置，在.b:hover里面加上transform-origin：top/bottom/left/right
试用css3 语法@media screen and (判断属性){ CSS样式选择器 }
1、DIV+CSS小案例描述
根据整体来设置，设置他们的最大宽度(width)为640px，最小宽度为320px，此类设置适用于手机移动端；要实现屏幕自适应，那么就要用百分比来实现；所以设置width整体100%；img宽度100%；这样实现图片的自由缩放；
HTML代码如下：且仔细看清每一行的注释：
2、看下实现的效果如何：文字大小是如何变化的；
变化浏览器后效果：如图
自定义缩放其实主要就是判断浏览器的宽度，高度需要的话可以设置，还有设置内部区域块儿的宽度以及图片展示用百分比来控制；
这个是 css3 的 animation 和 做出来的
/* 定义动画 */@-moz-keyframes mian_control_ico{
0%{-moz-transform:perspective(400px) rotateY(90deg)}
40%{-moz-transform:perspective(400px) rotateY(0deg)}
70%{-moz-transform:perspective(400px) rotateY(0deg)}
100%{-moz-transform:perspective(400px) rotateY(0deg)}
}
@-ms-keyframes mian_control_ico{
0%{-ms-transform:perspective(400px) rotateY(90deg)}
40%{-ms-transform:perspective(400px) rotateY(0deg)}
70%{-ms-transform:perspective(400px) rotateY(0deg)}
100%{-ms-transform:perspective(400px) rotateY(0deg)}
}
@-webkit-keyframes mian_control_ico{
0%{-webkit-transform:perspective(400px) rotateY(90deg)}
40%{-webkit-transform:perspective(400px) rotateY(0deg)}
70%{-webkit-transform:perspective(400px) rotateY(0deg)}
100%{-webkit-transform:perspective(400px) rotateY(0deg)}
}
/* 在 hover 伪类触发动画 */
.yb_nav_area li.pc a:hover .n_ico ,.yb_nav_area li.Ad a:hover .n_ico ,.yb_nav_area li.iPhone a:hover .n_ico,.yb_nav_area li.iPad a:hover .n_ico {
-webkit-animation: mian_control_ico 1s .1s ease both
-moz-animation:mian_control_ico 1s 0s ease both
-ms-animation:mian_control_ico 1s 0s ease both
-webkit-animation: mian_control_ico 1s 0s ease both
}
以上只是 css 代码，相信聪明的题主会看懂，其中：
① rotateY(0deg) 就是垂直旋转，旋转多少度数；
② perspective 是 3d 视距，具体差别在下图：
有 3d 视距的旋转时图形会有倾斜；
无 3d 视距的旋转时图形只会缩放；
③ 而 keyframe 关键帧将旋转从90度转到0度，并且有 3d 视距 400 像素；
perspective 也是刚知道，现学现卖~
