animation

2018-08-15  本文已影响0人  鹿啦啦zz

transition-timing-function
抛物线动画(By张鑫旭)

定义和用法

animation-timing-function 规定动画的速度曲线。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。

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

animation:mymove 5s infinite;//mymove动画名,5s动画时间,infinite永久动画
@keyframes mymove      //定义动画
{
  from {left:0px;}
  to {left:200px;}
}
上一篇下一篇

猜你喜欢

热点阅读