微信小程序动画专题课程-通过wxss(css)来实现-第6课-animation-timing-function属性

animation-timing-function: value;

<view>linear 动画从头到尾的速度是相同的。</view>

<view>ease   默认。动画以低速开始，然后加快，在结束前变慢。</view>

<view>ease-in 动画以低速开始。</view>

<view>ease-out        动画以低速结束。</view>

<view>ease-in-out     动画以低速开始和结束。</view>

<view>cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。</view>

<view class='c01'>01</view>

<view class='c02'>02</view>

.c01{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

animation-timing-function:linear;

}

@keyframes mymove

{

from {left:0px;}

to {left:200px;}

}

.c02{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove2 5s infinite;

animation-timing-function: ease;

}

@keyframes mymove2

{

from {left:0px;}

to {left:200px;}

}