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

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

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

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