css-动画

动画

渐变

线性渐变

background-image:

linear-gradirent(to 方向,第一个颜色,第二个颜色);

• 方向
  • 未设置方向， 默认从上到下
  • to right bottom 从左上
  • 60deg 角度渐变
• 颜色
  • 百分比 占比区域
  • 像素

repeating- linear-gradirent(); 重复渐变

径向渐变

radial-gradirent();

动画

2D变形

transform

• translate(x轴,y轴)； 位移

• rotate (度数) 旋转

• scale (倍数） 缩放

• skew(度数） 倾斜

• matrix (）

transform-origin（right bottom） 右下 基准点

过度

transition: 时间;

动画帧

animation ：名字 ，一个周期的毫秒数 ，速度，，

@keyframes  名字{
​	from{
	}
​	to{
	}
}