过度动画执行完成事件 transitireend

开启3d空间

一般正对父级
transform-style-preserve-3d
rotateZ和rotate是一样的效果 只不过一个是3d 一个是平面
translate值 由百分比 像素
但是在z轴 只有像素
让元素X旋转90度可以隐藏
translate3d只能跟3个值

景深设置

在父级开启景深，子元素都将开启进大远小的效果
perspective
远大越大 越小越小
只想单独让一个元素实现景深效果，那么就要给这个元素单独设置
transform：perspective

关键帧动画

关键帧是以 @keyframes name{}来定义的 书写在css样式style标签中
当某个元素 需要动画的时候 可以直接调用这给关键帧即可 可以复用。
当关键帧的两个帧是from和to的时候代表的是0 和百分之百的状态
当关键帧开始后会先执行form 然后依次执行百分比 然后执行到to
当然也可以不写from和to直接书写百分比。
animation-direction：alternate动画轮流方向播放
animation-fill-mode：backwards
在执行前让元素以第一帧动画等待
animation-fill-mode：forwards
在执行后让元素保持最后一帧样式
animation-fill-mode；both
两个效果都实现

控制动画停止

暂停动画
animation-play-state：paused
动画执行
animation-play-state：running