2021-03-31

3D转换

平移
	transform: translate(值)
旋转
	transform: rotateX(角度)
	旋转中心
		transform-origin(0,0)
倍数
	transform: scale(倍数)
perspective:  像素值
	取值一般为600px ~ 1000px
语法
	transform-style: preserve-3d
		一般给父元素设置

动画

属性

	animation-name	动画名称
	animation-duration	动画时长
	animation-delay	延迟时间
	animation-fill-mode	动画执行完毕时状态	none（默认值）
    forwards：动画停留在100%的样式上
    backwards：动画在0%的样式上等待
    both=forwards+backwards
 	animation-timing-function	运动曲线	ease（默认值）：先加速，以低速结束
    linear：匀速
    steps(步数)：一跳一跳的感觉
  贝塞尔曲线：https://cubic-bezier.com/
   animation-iteration-count	重复次数	infinite：无线循环
   animation-direction	动画执行方向	                            alternate：交替的、轮流

animation 复合属性 注意：

1、不包含animation-play-state
2、只有两个时间（duration和delay）有顺序要求，其它值没有顺序要求
animation: name duration timing-function delay iteration-count direction fill-mode;

步骤

	1,定义动画
	2,使用动画
声明动画两种方式
	from、to
	%
注意属性覆盖问题

动画与过度的区别

1,动画比过度强大,过渡相当于动画的一个子集
2,过渡只能执行一次,动画可以随意设置
3,过渡一般需要用户主动去触发，而动画不需要