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

1
2
3
4
5
6
7
8
9
10
11
div{
  animation:mymove 5s infinite;
 }
@keyframes mymove {
    from{
        left：10px
     }
    to{
      left：100px
     }
}

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

1
2
-webkit-animation:
@-webkit-keyframes  name{}
  • animation-name

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


  • animation-duration

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


  • animation-timing-function

    规定动画的速度曲线

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

  • animation-delay

    规定在动画开始之前的


  • animation-iteration-count

规定动画应该播放的次数

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

  • animation-direction

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

1
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等。

使用

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