变形与动画相关属性

1.四种基本变形

位移变换：translate和所有以transla开头的函数都支持位移变换。
旋转变换：rotate和所有以rotate开头的函数都支持旋转变换。
缩放变换：scale和所有以scale开头的函数都支缩放变换。
倾斜变换：skew和所有以skew开头的函数都支持倾斜变换。

       transform:translateX(Npx);沿X轴移动
       transform:translateY(Npx);沿Y轴移动
       transform:translateZ(Npx);沿Z轴移动
         
       transform:rotate(Npx);旋转
       transform:rotateZ(Npx);旋转
       transform:rotateX(Npx);绕X轴旋转
       transform:rotateY(Npx);绕Y轴旋转
       transform:rotateX(Npx)   rotateY(Npx);绕X、Y轴同时旋转
       
      transform:scaleX(X);沿X轴缩放//其中的X值通常为0~N之间，例如0.8即为缩小到原来大小的0.8，1.2即为扩大到原来的1.2
      transform:scaleY(X);沿Y轴缩放
      
      transform:skewX(Npx);沿X轴倾斜
      transform:skewY(Npx);沿Y轴倾斜

新增的3D变换：

 transform-style属性: 设置给父元素.
 transform-style: 指定是否在3D空间内正确的呈现元素的“遮挡”等嵌套关系.
 flat: 不保留子元素的3D位置.
 preserve: 子元素将保留3D位置
 backface-visibility属性: 设置元素转到背面时是否可见.
 visible: 背面时可见的.
 hidden: 背面是不可见的.

2.Transition动画

  transition-property: 指定对元素的哪个CSS属性进行平滑的渐变处理,该属性可以指定 background-color、width、eight等各种标准的CSS属性.
  transition-duration: 指定属性平滑渐变的持续时间.
  transition-timing-function: 指定渐变的速度: 该部分支持如下几个值：
      ease: 动画开始时较慢,然后速度加快,到达最大速度后再减慢速度.
      linear:线性速度.
      ease-in: 动画开始时速度慢,然后速度加快.
      ease-out: 动画开始时速度很快,然后速度减慢.
      ease-in-out:动画开始时较慢,然后速度加快,到达最大速度后再减慢速度.
   transition-delay: 指定延迟时间.
    
    transition：left 5s linear;/实例

3.Animation动画

animation-name:指定动画名称.
animation-duration: 指定动画的持续时间.
animation-timing-function: 指定动画的变化速度.
animation-delay: 指定动画延迟多长时间才开始执行.
animation-iteration-count: 指定动画循环的次数.
  @keyframes fkjava{
  0%{
      属性值
  }
  ...............

  100%{
      属性值
  }
  
  }
  div{
  animation-name：fkjava;
  animation-duration：5s;
  animation-interation-count：1;/ /infinite表示动画循环的次数为无限次
  }