CSS3动画

前端学习 逆战班

css过渡是一种隐式动画。换句话说，我们给浏览器指定两个状态，让浏览器在元素从一个状态过度到另一个状态的过程中，个指定的属性添加动画效果。有时候，动画的范围不仅限于两个状态，或者要实现动画的属性一开始也不一定存在。

1、animation

取值

<' animation-name '>：
检索或设置对象所应用的动画名称
<' animation-duration '>：
检索或设置对象动画的持续时间
<' animation-timing-function '>：
检索或设置对象动画的过渡类型
<' animation-delay '>：
检索或设置对象动画延迟的时间
<' animation-iteration-count '>：
检索或设置对象动画的循环次数
<' animation-direction '>：
检索或设置对象动画在循环中是否反向运动
<' animation-fill-mode '>：
检索或设置对象动画时间之外的状态
<' animation-play-state '>：
检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

标题兼容性

2、变换的原点

默认情况下，变换是以元素边框盒子的中心作为原点的。控制原点的属性叫transform-origin。
可以给transform-origin设置1~3个值，分别代表x、y、z轴坐标。如果只给了一个值，则第二个默认关键字center，与background-position类似。

3、曲线动画

通常元素在两点之间是走直线的。通过多使用一些关键帧，每一帧稍微改变一点方向，可实现元素沿曲线运行。但更好的方法是以特殊方式组合旋转和平移。

@keyframes run{
				0%{transform: rotate(0) translatex(0px);}
				50%{transform:rotate(-30deg) translatex(300px);}
				100%{transform:rotate(0deg) translatex(600px) ;}
			}

当0%-50%时小球向右上移动了300px，是因为当旋转属性在位移属性之前时，会先旋转再位移，此时小球的X抽位置已经发生改变逆时针旋转了30deg，固小球的运动会偏离X轴30deg，当50%-100%时小球从-30deg变为0再移动300px小球右重新回到了初始的X轴上

当位移在旋转之前时先位移再旋转，此时的小球不会发生曲线运动，

@keyframes run{
				0%{transform: translatex(0px) rotate(0) ;}
				50%{transform:translatex(300px) rotate(-30deg)  ;}
				100%{transform:translatex(600px) rotate(0deg)  ;}
			}

4、大小变换

@keyframes run{
				0%{transform: translatex(0px) scale(1) ;}
				100%{transform:translatex(300px) scale(2)  ;}
			}

当位移在缩放前会先位移再缩放，当位移到300px位置时，小球的宽高会变大一倍，因为位移的距离是根据位移前的圆心到位移后的圆心来计算的，小球放大后的面积会覆盖位移距离，所以以边到边的位移距离来看的话实际位移距离只有200px
对比效果如下

先缩放再位移时

	@keyframes run{
				0%{transform:   scale(1)  translatex(0px)   ;}
				100%{transform:  scale(2)  translatex(300px)    ;}

			}
			@keyframes run2{
				0%{transform:translatex(0px)  scale(1)   ;}
				100%{transform: translatex(300px) scale(2)    ;}
			}

当先缩放再位移时原点的X轴位置因为缩放的关系已经先发生了位移所以实际位移距离要比更远