动画&3d转换

1.动画

1.语法

1.定义动画

@keyframe 动画名{
	0%{
		开始状态的样式
		}
	*%{
		中间状态的样式
		}
	100%{
		结束状态的样式
	}

}

2.绑定动画

animation:动画名 执行时间 延迟时间 变化曲线 执行次数 执行方向;

说明： 变化曲线-linear代表匀速

​ 执行次数-可以直接给数字，也可以是infinite无穷次

​ 执行方向-默认为开始到结束，如果希望可以交替方向执行 alternate

​ 如果有多个动画要设置，用逗号分隔，写下一个动画的设置即可。

3.动画播放状态

animation-play-state:paused(暂停) | running（播放）;

注意：动画名不能用running 或paused

2.3d相关属性

1.设置舞台类型

tranfrom-style:preserve-3d | flat平面

2.设置变形的基点

tranform-origin:*px *px | 方向的英文 left right top bottom

3.景深：

1.概念

观察者与被观察者中间的距离

方法一：

perspective:*px

方法二：

transform: perspective(*px);

4.背面是否可见

backface-visibility:visible（可见） | hidden(隐藏);