css 动画总结

一、2D、3D 转换 (transform)

让元素在一个坐标系统中变形

//  浏览器前缀
    -webkit-transform
    -moz-
    -ms-
    -o-

2D转换

• translate(x,y) 平移

  transform:translate(100px,100px)   //  第二个参数可省略，默认为0
  transform:translateX(100px)      //   X轴
  transform:translateY(100px)      //   Y轴
  

• rotate(180deg) 旋转

• scale(w,h) 缩放

  transform:scale（2）  // 一个参数，等比例缩放 
  transform:scale(1,2)  宽放大一倍即不变，高度放大两倍
  transform:scaleX(2)
  transform:scaleY(2)
  

• skew(50deg,50deg) 倾斜

  X 是水平方向，Y垂直方向 （元素得是块元素）

  //如果第二个参数省略，默认为0
  transform:skew(50deg,50deg)    // x 轴倾斜50deg，y轴倾斜50deg
  

  skewX(<angle>)按指定的角度沿X轴斜切变化，X轴方向平行不变，Y轴方向变切斜
  图片.png
  skewY(<angle>)按指定的角度沿Y轴斜切变化，Y轴方向平行不变，X轴方向变切斜
  图片.png

transform-origin

transform-origin 来对元素进行原点位置改变，默认是以元素中心位置
可以设置的属性值：left、right、top、bottom、center

transform-origin:left top;       // 左上角

3D转换

图片.png

• rotateX(angle)

  rotateX方法指定对象在 X轴上的旋转角度（围绕 X轴旋转）。

  
  图片.png

• rotateY(angle)

  rotateY方法指定对象在 Y轴上的旋转角度（围绕 Y轴旋转）。

  
  图片.png

• rotateZ(angle)

  rotateZ方法指定对象在 Z轴上的旋转角度（围绕Z轴旋转）,效果和 skew旋转一样

• rotate3d(x,y,z,angle)

前三个参数分别表示旋转的方向x，y，z，第四个参数表示旋转的角度，参数不允许省略。

 rotate3d(1,0,1,45deg)     // 1 代表此方向旋转，0 代表此方向不旋转

• translateZ(z)

• translate3d(x,y,z)

扩展属性

• transform-style 属性指定嵌套元素是怎样在三维空间呈现（3D环绕效果）。
  transform-style ：flat | preserve-3d
  preserve-3d
  图片.png
  flat(默认)
  图片.png

• perspective 属性（给父级设置）
  指定观察者与[z=0]平面的距离，使具有三维位置变换的元素产生透视效果。值越小里的越近，越大离的越远
  perspective ：number | none
  

  图片.png
  图片.png

• perspective-origin 属性，指定透视点的位置（给父级设置）
  perspective-origin ： x-axis y-axis

   perspective-origin：top          // 俯视看  （从上往下看）
   perspective-origin：center/50%      // 平视角度看
   perspective-origin：bottom      //  仰视看（从下往上看）
  

• backface-visibility 属性
  指定元素背面面向用户时是否可见
  backface-visibility ： visible | hidden

实例效果

图片.png

<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>

div {
         transform-style: preserve-3d;
         perspective: 500px;
         perspective-origin: bottom;
 }
div > .inner {  transform: rotateY(67deg)}
div > .middle {  transform: rotateX(45deg)}
div > .outer {  transform: rotateZ(45deg)}
div > .imooc { background: url(./img/imooc.png) no-repeat center center; }

二、过渡（ transition）

允许css 的属性值在一定的时间区间平滑度过，在鼠标单击、获取焦点、被点击或对元素任何改变中触发并圆滑地以动画效果改变css 属性值。

• transition

  transition属性是一个简写属性，用于设置四个过渡属性

  transition: property duration timing-function delay;
  transition: width 1s ease 2s;
  

• transition-property

  设置过渡效果的 CSS 属性的名称，比如width、 color 、opacity等属性
  transition-property：none | all | property

  transition-property:width 
  

• transition-duration

  检索或设置对象过渡的持续时间，规定完成过渡效果需要花费的时间

  transition-duration:1s
  

• transition-timing-function

检索或设置对象中过渡的动画类型

图片.png

transition-timing-function:ease

• transition-delay

检索或设置对象延迟过渡时间

ttransition-delay:2s

例子：当鼠标经过div时，宽度由100px变成200px,设置过渡效果

div{
  width:100px;
  transition:width 1s ease 2s 
  // 属性：宽，执行时间：1s，速度曲线：ease，延时：2s
}
div:hover{
   width:200px
}

如果属性设置成 all代表所有属性

三、动画 animation

animation：keyframe 名称，时间，速度曲线，延迟、播放的次数、direction

div{
  animation:mymove 5s infinite;
 }
@keyframes mymove {
    from{
        left：10px
     }
    to{
      left：100px
     }
}

兼容手机端需要加浏览器前缀

-webkit-animation:
@-webkit-keyframes  name{}

• animation-name

  设置对象所应用的对象名称

• animation-duration

  规定完成动画所花费的时间，以秒或毫秒计

• animation-timing-function

  规定动画的速度曲线

  属性值： linear、ease、ease-in  、ease-out 等
  

• animation-delay

  规定在动画开始之前的

• animation-iteration-count

  规定动画应该播放的次数

  animation-iteration-count:n（1,2,3....）|infinite (无限循环)
  

• animation-direction

  规定是否应该轮流反向播放动画，默认 normal

  animation-direction:alternate;
  

• animation-fill-mode

  规定当动画不播放时（当动画完成或者动画有延迟未开始播放时），要应用到元素的样式。
  animation-fill-mode：none | forwards | backwards | both | initial | inherit
  参数说明：

  • none：默认值，不设置对象动画之外的状态
  • forwards：设置对象状态为动画结束时的状态
  • backwards：设置对象状态为动画开始的状态
  • both：设置对象为动画结束或开始的状态

• animation-play-state

  指定动画是否正在运行或已暂停
  animation-play-state：paused | running
  参数说明：

  • pasued：指定暂停动画
  • running：默认值，指定正在运行的动画

will-change

提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置
增强页面渲染性能

参数说明：

• auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化。
• scroll-position：表示将要改变元素的滚动位置
• contents：表示将要改变元素的内容
• <custom-ident>:明确指定将要改变的属性与给定的名称
• <animateable-feature>：可动画的一些特征值，比如 left、top、margin等。

使用

-webkit-will-change:transform    //  属性名称
-moz-will-change:transform