CSS动画常用的几种方式

CSS3动画

浏览器私有前缀

内核	前缀
Gecko(Firefox)	-moz-
Webkit(Google、Safari)	-webkit-
Trident (IE)	-ms-
Presto (opera)	-o-

阴影

text-shadow：横向偏移位置 纵向偏移位置 模糊度 颜色，……；

box-shadow：横向偏移位置 纵向偏移位置 模糊度 颜色

box-shadow：横向偏移位置 纵向偏移位置 模糊度 外延值 颜色

​box-shadow：横向偏移位置 纵向偏移位置 模糊度 颜色 inset（内置阴影）

线性渐变

背景渐变设置background-image

background-image: linear-gradient(to 方向 / 角度, 颜色……);

径向渐变

background: radial-gradient(以下参数，颜色1，颜色2);

中心：

at x y（左上角圆点为参考点），可以是像素/百分比

大小：

• 最近边 closest-side
• 最远边 farthest-side
• 最近角 closest-corner
• 最远角 farthest-corner

形状：

ellipse / circle

Transform 2D

移动：translate(x,y)

旋转：rotate(角度)

缩放：scale(x,y)

倾斜：skew(a,b)

Transform 3D

需要加上透视属性：perspective

过渡属性

transition-property: background-color;

transition-duration: 4s;

transition-delay: 1s;

transition-timing-function: linear;

transition: all 3s 1s linear;