今日学习内容

• 隐藏背面

Backface-visibility:hidden;

• 关键帧动画

创建关键帧动画

方式一：@keyframes 动画名{

From{初始状态}  此项可以省略

To{结束状态}

}
方式二：@keyframes 动画名{

0%{初始状态}  此项可以省略

50%{状态一}

70%{状态二}

....

100%{最终状态}

}

引入关键帧动画 animation：

动画名称  

时间  

执行次数（默认1次 infinite 无限次循环）

运动形式（ease默认  ease-in   ease-out  ease-in-out  linear匀速  steps() 步长）  

延迟执行时间   

动画下一次如何执行（alternate 方向 alternate-reverse 开始反向执行）

动画执行完成之后保留在那个状态（默认是恢复到初始床头    forwards保留在最后一个状态）

动画是否执行（running 执行 默认   paused暂停）

鼠标划上停止：animation-play-state: paused;

  注意：如果想引入关键帧动画至少要存在两个属性值 动画名称  执行时间

animation-name: dong; 动画名称

animation-duration: 3s;  动画执行时间

animation-delay: 1s; 动画延迟执行时间

animation-timing-function: linear;  运动形式

animation-direction: alternate;  下一个周期如何运动

animation-fill-mode: forwards;  动画执行完成之后保留的状态

animation-iteration-count: 3;  动画执行次数

animation-play-state: paused;  动画是否执行

• Transition与animation的区别

相同点：都存在过渡效果，都可以设置时间  延迟时间  运动形式

不同的：transition一般需要绑定在某个元素的动作上（需要事件的支持）animation可以实现浏览器打开自动执行效果；

  Transition想要执行多次需要多次触发对应事件  执行完成之后就回到初始状态

Animation 可以直接设置执行次数  可以执行过程中暂停  执行完成之后可以保留在最后的位置

• 3d属性transform

1. 景深属性 perspective

在多远的距离去观察这个事物

两种使用方式：

第一种直接写perspective：值（此写法必须写给父元素）

第二种写给元素 本身  transform：perspective（值）

值越小效果越大，值越大效果越小

1. 旋转函数

X代表上下 正值向上   负值向下

Y代表左右  正值向右  负值向左

Z 代表前后  正值向前  负值向后

Rotate3d（x，y，z，角度）

Xyz的取值0-1   0不旋转  1旋转  此方式有局限角度只能是一个

1. 缩放 scale3d（x,y,z）
2. 偏移translate3d（x，y，z）

X 代表水平 左右  正值向右  负值向左

Y代表垂直 上下   正值向下  负值向上

Z代表平面  前后  正值向前  负值向后

1. Transform-style：preserve-3d  3d空间的透视效果