CSS动画

用transition样式表示动画的

然后它后边可以跟几个参数：

1.在哪产生动画

2.动画消耗的时间

3.运动曲线

4.延迟多长时间才开始执行动画，不写就不延迟

也可以用all来表示所有的样式默认开启。

动画的运动曲线：

1.匀速  linear

2.开始和结束慢速，中间加速   ease

3.开始慢速，结尾突然停止   ease-in

4.突然开始，结束时慢速    ease-out

5.开始和结束时慢速   ease-in-out

6.贝塞尔（贝兹）曲线   cubic-bezier(0.250,0.250,0.750,0.750);匀速

超出再缩回的弹性效果  cubic-bezier(0.470, -0.485, 0.460, 1.435)

图片文字遮罩

transform 变形

元素的旋转

首先我们要能够判断旋转方向

1、X轴向右、Y轴向下、Z轴向屏幕外

2、让轴向对着自己，顺时针方向就是该轴向的旋转方向

我们也可以设置元素旋转的旋转点：

1.我们可以用 top button left right 中的相连两个边的方向来定位中心点

2. 我们也可以用具体的数来定位旋转的中心点

设置背面可见

设置图片翻面

animation动画与transition不同之处在于它是自动动画，而不是鼠标移入才执行。

它的参数是：动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态

infinite不限制次数

alternate动画结束后返回，返回也算次数

animation-fill-mode 动画前后的状态

forwards动画完成保持在最后一帧

backwards在延迟时间内，在动画显示之前，应用

from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）

both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）

人物走路动画

可以把动画分成不同的部分，每一部分执行不同的变化，叫做多帧动画。

圆角用  border-radius 表示 ，也可以用方位词和具体的数值来表示圆角的程度。

box-shadow来表示阴影，后边的参数有  ：

水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

其中若没有内阴影，可以不写此参数。

透明度可以用 opacity 来表示。

可以用rgba来设置背景的透明色；参数有四个，前三个表示和颜色一样，最后一个用0-1之间的数字来表述透明度。

loading动画

有关于HTML音视频在网页上的加载: