CSS学习笔记（十一）动画模块和3D转换模块

一、动画模块基本属性

1、过渡与动画的异同
（1）不同：过渡需人为触发才会执行；动画不需人为触发就可执行
（2）相同：都是用来给元素添加动画的；都是系统新增的一些属性；都需满足三要素才会有动画效果

2、三要素：
（1）告诉系统需执行哪个动画animation-name: Inj;
（2）告诉系统我们需自己创建一个名称叫做Inj的动画

@keyname Inj{
	from{
		margin-left: 0;
	}
	to{
		margin-left: 500px;
	}
}

3、其他属性
（1）告诉系统几秒后开始执行动画：animation-delay: 2s;
（2）告诉系统动画执行的速度：animation-timing-function: linear;
（3）告诉系统动画需要做几次：animation-iteration-count: 3;
（4）

animation-direction: normal; <!--默认，执行完回到起点，再进行下一次-->
					 alternate; <!--往返动画-->

（5）（用于hover里面）

animation-play-state: running; <!--告诉系统当前动画继续执行-->
					  paused; <!--告诉系统当前动画暂停-->
					  

（6）做矩形动画

@keyframes sport{
	0%{
		left: 0;
		right: 0;
	}
	25%{}
	50%{}
	75%{}
	100%{}
}

（7）动画是有一定状态的：等待状态、执行状态、结束状态

animation-fill-made: none; <!--不做任何改变-->
					 forwards; <!--让元素结束状态保持最后一帧的样式-->
					 backforwards; <!--让元素等待状态时显示动画第一帧的样式-->
					 both; <!--让元素等待状态显示动画第一帧的样式，让元素结束状态显示动画最后一帧的样式-->

二、动画模块——连写/云层动画/无限滚动

1、连写：animation: 动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
简写：animation: 动画名称 时长;

2、无限滚动：多出两张用来跳转，但肉眼看不出来。

三、3D转换模块

1、让元素呈3D展现，和透视一样，想看到某个元素的3D效果，只需给它的父元素添加一个transform-style属性，然后设置为preserve-3d即可。transform-style: preserve-3d;

2、2D和3D：2D为一个平面，只有宽、高度，无厚度；3D为立体，有宽、高、厚度。

3、3D转换——正方体：左右平移，上下平移，前后移动。

4、3D转换——长方体：先编写正方体，然后发射（transform: scale;）为长方体。

四、3D播放器

1、动画中如果有和默认样式中同名的属性，会覆盖默认样式中同名的属性。

2、在编写动画时，固定不变的值写在前面，需要改变的值写在后面。