CSS渐变和动画

CSS渐变

线性渐变：
线性渐变：linear-gradinet（开始位置 角度，起始颜色，终止颜色）
重复线性渐变：repeating-linear-gradinet（）

渐变方向：默认从上到下；从左到右(to right)；从左上到右下(to right bottom)；角度(数值deg)
使用多颜色，默认各颜色所占区域是等分的，也可通过百分比或者像素改变各颜色所占区域
径向渐变(放射渐变)：
径向渐变：radial-gradinet()(形状 发散方向，起始颜色，终止颜色)
重复的径向渐变：repeating-radial-gradinet()

• 形状：ellipse（椭圆）/circle（圆形）
• 发散方向：属性值可以为 left、right、top、bottom、center（可组合使用）
• 大小(半径)：属性值可用像素或关键字表示
• closest-side:圆心到距离最近的边
• farthest-side:圆心到距离最远的边
• closest-corner：圆心到距离最近的角
• farthest-corner：圆心到距离最远的角

CSS动画

一、动画效果——变形
transform：2D 变形：

• 移动：translate(x,y)
  translateX(x) 定义X 轴的值
  translateY(y) 定义 Y 轴的值
• 缩放：scale(x,y)
  scaleX(x) 通过设置 X 轴的值来定义缩放转换
  scaleY(y) 通过设置 Y 轴的值来定义缩放转换
• 旋转：rotate(angle)
  skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
  kewX(angle) 定义沿着 X 轴的 2D 倾斜转换
  skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换
• 转换：matrix(n,n,n,n,n,n)定义2D转换，使用六个值的矩阵
• 元素变形基准点：transform-origin
  像素/百分比
  X 轴：left/right/center
  Y 轴：top/bottom/center/
  transform：3D 变形：
• translate3d(x,y,z) 定义 3D 转换
  translateX(x) 定义X轴的值
  translateY(y) 定义Y轴的值
  translateZ(z) 定义Z轴的值
• 旋转：rotate3d(x,y,z,angle)
  rotateX(angle) 定义X轴的 3D 旋转
  rotateY(angle) 定义Y轴的 3D 旋转
  rotateZ(angle) 定义Z轴的 3D 旋转
• 缩放：scale3d(x,y,z)
  scaleX(x) 通过设置X轴的值来定义缩放转换
  scaleY(y) 通过设置Y轴的值来定义缩放转换
  scaleZ(z) 通过设置Z轴的值来定义 3D 缩放转换
• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D
  转换，使用 16 个值的 4x4 矩阵
• transform-origin 允许你改变被转换元素的位置。2D 转换元
  素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴
• perspective(n) 为 3D 转换元素定义透视视图
• transform-style 规定被嵌套元素如何在 3D 空间中显示
  flat 子元素将不保留其 3D 位置
  preserve-3d 子元素将保留其 3D 位置
• perspective-origin 规定 3D 元素的底部位置
• backface-visibility 定义元素在不面对屏幕时是否可见
  二、动画效果——过渡
• transition 简写属性，用于在一个属性中设置四个过渡属性
• transition-property 规定应用过渡的 CSS 属性的名称
  none 没有属性会获得过渡效果
  all 所有属性都将获得过渡效果
• transition-duration 定义过渡效果花费的时间。默认是 0。单位是秒或毫秒
• transition-timing-function 规定过渡效果的时间曲线。默认是"ease"
  linear 规定以相同速度开始至结束的过渡效果（等于
  cubic-bezier(0,0,1,1)）
  ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
  ease-in 规定以慢速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）
  ease-out 规定以慢速结束的过渡效果（等于 cubicbezier(0,0,0.58,1)）
  ease-in-out 规定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1)）
  cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
• transition-delay 规定过渡效果何时开始。默认是0

三、动画效果——关键帧动画

1. .@keyframes 设定动画规则
   name 必需。定义动画的名称
   0-100%/from…to… 必需。动画时长的百分比
   需要变化的 CSS 样式属性:必需

• animation-name 属性为 @keyframes 动画规定名称。若设置为none 则覆盖已有的动画效果
• animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0
• animation-timing-function 规 定 动 画 的 速 度 曲 线 。 默 认 是"ease"
• animation-delay 规定动画何时开始。默认是 0
• animation-iteration-count 规定动画被播放的次数。默认是1。infinite 为无限次播放
• animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal 顺向播放”。 alternate 动画应该轮流反向播放
• animation-play-state 规定动画是否正在运行或暂停。默认是"running 规定动画正在播放。"。/paused 规定动画暂停
• animation-fill-mode 规定对象动画时间之外的状态
  none 不改变默认行为
  forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
  backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
  both 向前和向后填充模式都被应用