关键帧 例如：
调用关键帧：
语法 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
一、首先学习的是transition属性（zoom不支持transition,适用于具体数值的属性值变化或者背景图的变换）transition 过渡 作为一个复合属性
1.transition-property 指定可以过渡的属性
默认值是all 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
2.transition-duration 指过渡完成的时间
默认值为0s
3.transition-timing-function 过渡的动画类型
默认值为ease
ease 规定慢速开始，然后变快，之后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
linear 规定以相同速度开始至结束的过渡效果
cubic bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值
4.transition-delay 延迟执行过渡的时间
默认值为0s
二、transform属性
transform 向元素应用2D或3D转换 只对block级元素生效
1.translate 位移
translateX() 在x轴上发生位移或者变形
translateY() 在y轴上发生位移或者变形
translate(x,y) 在x轴 ，y轴上发生位移或者变形 当只有一个值的时候，只有x轴生效
2.scale 缩放
scaleX() 设置在x轴上发生缩放
scaleY() 设置在y轴上发生缩放
scale(x,y) 设置在x轴，y轴上发生缩放 当只有一个值的时候，x，y轴都发生缩放可以设置负数 使用场景：设置小于12px的字体
3.rotate 旋转 2d旋转 设置元素在2d平面旋转（z轴），正数按顺时针，负数按逆时针
rotateX（）设置沿x轴旋转
rotateY () 设置沿y轴旋转
4.skew 倾斜
skewX 绕x轴发生倾斜
skewY 绕y轴发生倾斜
skew(x,y) 绕x,y轴发生的倾斜 x轴和y轴和我们理解的相反，常用于平行四边形图案
三、transform-origin: 设置旋转元素的基点位置
transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；
因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。
但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。
下面我们主要来看看其使用规则：
transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom 。
语法：-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ] ?
transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数
top left | left top 等价于 0 0；
top | top center | center top 等价于 50% 0
right top | top right 等价于 100% 0
left | left center | center left 等价于 0 50%
center | center center 等价于 50% 50%（默认值）
right | right center | center right 等价于 100% 50%
bottom left | left bottom 等价于 0 100%
bottom | bottom center | center bottom 等价于 50% 100%
bottom right | right bottom 等价于 100% 100%
rotate
rotateX
rotateY
rotateZ
rotate3d
rotate：
旋转该元素，配合着transform-origin属性，transform-origin 是设置旋转点的。(没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是center center)
加上 transform-origin 设置旋转点。transform-origin 是根据自己而定位的，所以 0px 0px 就是左上角那个点。
rotateX：
讲这个之前呢， 先普及一个知识， 在transform里面，x y z 轴，分别是什么样子的，他跟我们平常的 x 和 y 不太一样，因为， 他是倒着的。 Z轴呢，在0 那个位置，因为他是3D的，看下面的图，转个身就知道在那里了。
接下来，看看 所谓的 Z 轴是什么
rotateX 的X呢，可以写成大写的，也可以写成小写的x， 没有影响，这个属性呢，你加上rotateX 之后，这个元素，就会以 X 轴 旋转，里面填的是角度。
这样看起来，好像不是那么直观，毕竟是2D 的图， 来给他加了3D 的效果看看，(由于设置了 transform-origin：0 0，所以并不会在元素的中间旋转，而是以 0 0 点的那条x 轴旋转)
上面两个图，第一个图是在 2d的 情况下观看的，第二个图是 3d的时候， 是不是 3d 看起来比较直观。
那么，接下来，加上Y 一起使用，rotateX(45deg) rotateY(45deg)，这两个合在一起什么意思呢， 这个元素，先按照 X轴，旋转45度，然后再按照Y轴，旋转45度，那么接下来的结果会是怎么样呢？
由于我设置的 transform-origin：center center ；定的点在中心，那么两条轴，是会成这样子的。
然后，看下，结果，是不是如我们所示？
最后，加上rotateZ
rotate3D：
设置一条主轴，然后根据这条轴旋转
这个呢，可以设置4个参数， 前三个是，x y z 最后一个是 角度deg 但是，此 x y z ，可不是上面那几个，不一样的。这三个值，设置的是矢量的方向，填什么无所谓，主要是比值很重要。举个例子 1，1，0，0deg那么就是 1：1：0 = 100：100：0 对吧，拿这个值来图解比较好。
