css3动画速度曲线

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ministech/article/details/79235474

语法一

animation-timing-function: value;

value:
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

cubic-bezier动态设置
http://yisibl.github.io/cubic-bezier/#.42,.89,.45,-0.02

语法二

  <style>
    .animation {
      width: 50px;
      height: 50px;
      background-color: #ed3;
      -webkit-transition:  all 2s;
           -o-transition:  all 2s;
              transition:  all 2s;
    }
    .animation:hover {
      -webkit-transform:  translateX(100px) cubic-bezier(.17, .86, .73, .14);;
          -ms-transform:  translateX(100px) cubic-bezier(.17, .86, .73, .14);;
           -o-transform:  translateX(100px) cubic-bezier(.17, .86, .73, .14);;
              transform:  translateX(100px) cubic-bezier(.17, .86, .73, .14);;
    }
  </style>