<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{padding:0margin:0border:0}
.left{width:50%float:left
animation:myfirst 5s
-moz-animation:myfirst 5s/* Firefox */
-webkit-animation:myfirst 5s/* Safari and Chrome */
-o-animation:myfirst 5s/* Opera */
}
.right{width:50%float:left
animation:myfirst 5s
-moz-animation:myfirst 5s/* Firefox */
-webkit-animation:myfirst 5s/* Safari and Chrome */
-o-animation:myfirst 5s/* Opera */
animation-delay: 5s/* W3C 和 Opera */
-moz-animation-delay: 5s/* Firefox */
-webkit-animation-delay: 5s/* Safari 和 Chrome */
}
@keyframes myfirst
{
0% { opacity:0}
100% { opacity:1}
}
@-moz-keyframes myfirst /* Firefox */
{
0% { opacity:0}
100% { opacity:1}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% { opacity:0}
100% { opacity:1}
}
@-o-keyframes myfirst /* Opera */
{
0% { opacity:0}
100% { opacity:}
</style>
</head>
<body>
<div>
<div class="left"><img src="images/xxx.jpg"></div>
<div class="right">文字XX </div>
</div>
</body>
</html>
animation实现动画由俩个部分组成，通过类似flash动画的关键帧来申明一个动画，在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
关键帧 例如：
调用关键帧：
语法 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
