CSS animation-timing-function chỉ định tốc độ chuyển động

animation-timing-function ₃

Specifies the speed curve of the animation (chỉ định tốc độ chuyển động)

Thuộc tính	giá trị	Ví dụ	Mô tả
animation-timing-function	linear	animation-timing-function: linear;	Chuyển động đều
	ease	animation-timing-function: ease;	Chậm -> Nhanh -> chậm.
	ease-in	animation-timing-function: ease-in;	Chậm -> nhanh
	ease-out	animation-timing-function: ease-out;	Nhanh -> chậm
	ease-in-out	animation-timing-function: ease-in-out;	Chậm, nhanh, chậm
	cubic-bezier(n,n,n,n)	animation-timing-function: cubic-bezier(1,1,1,0);	Giá trị riêng cho chuyển động, giá trị sẽ từ 0 tới 1.

Xem ví dụ

<style>
#ttt
{
width:100px;
height:50px;
background:#E5EECC;
position:relative;
animation:mymove 5s infinite;
animation-timing-function:linear;
/* Firefox */
-moz-animation:mymove 5s infinite;
-moz-animation-timing-function:linear;
/* Safari and Chrome */
-webkit-animation:mymove 5s infinite;
-webkit-animation-timing-function:linear;
/* Opera */
-o-animation:mymove 5s infinite;
-o-animation-timing-function:linear;
}

@keyframes mymove {from {left:0px;}to {left:200px;}}
@-moz-keyframes mymove {from {left:0px;}to {left:200px;}}
@-webkit-keyframes mymove {from {left:0px;}to {left:200px;}}
@-o-keyframes mymove {from {left:0px;}to {left:200px;}}
</style>

<div id="ttt">Ví dụ đơn giản </div>

Ví dụ đơn giản

<style>
.div0word
{
width:100px;
height:50px;
background:#E5EECC;
color:#519A01;
font-weight:bold;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

#div1word {animation-timing-function:linear;}
#div2word {animation-timing-function:ease;}
#div3word {animation-timing-function:ease-in;}
#div4word {animation-timing-function:ease-out;}
#div5word {animation-timing-function:ease-in-out;}

/* Firefox: */
#div1word {-moz-animation-timing-function:linear;}
#div2word {-moz-animation-timing-function:ease;}
#div3word {-moz-animation-timing-function:ease-in;}
#div4word {-moz-animation-timing-function:ease-out;}
#div5word {-moz-animation-timing-function:ease-in-out;}

/* Safari and Chrome: */
#div1word {-webkit-animation-timing-function:linear;}
#div2word {-webkit-animation-timing-function:ease;}
#div3word {-webkit-animation-timing-function:ease-in;}
#div4word {-webkit-animation-timing-function:ease-out;}
#div5word {-webkit-animation-timing-function:ease-in-out;}

/* Opera: */
#div1word {-o-animation-timing-function:linear;}
#div2word {-o-animation-timing-function:ease;}
#div3word {-o-animation-timing-function:ease-in;}
#div4word {-o-animation-timing-function:ease-out;}
#div5word {-o-animation-timing-function:ease-in-out;}

@keyframes mymove
{
from {left:0px;}
to {left:600px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {left:0px;}
to {left:600px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:600px;}
}

@-o-keyframes mymove /* Opera */
{
from {left:0px;}
to {left:600px;}
}
</style>

<div id="div1word" class="div0word">linear</div>
<div id="div2word" class="div0word">ease</div>
<div id="div3word" class="div0word">ease-in</div>
<div id="div4word" class="div0word">ease-out</div>
<div id="div5word" class="div0word">ease-in-out</div>

linear

ease

ease-in

ease-out

ease-in-out

<style>
.div0number
{
width:100px;
height:50px;
background:#519A01;
color:#E5EECC;
font-weight:bold;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

#div1number {animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2number {animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3number {animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4number {animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5number {animation-timing-function:cubic-bezier(0.42,0,0.58,1);}

/* Firefox: */
#div1number {-moz-animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2number {-moz-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3number {-moz-animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4number {-moz-animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5number {-moz-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}

/* Safari and Chrome: */
#div1number {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2number {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3number {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4number {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5number {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}

/* Opera: */
#div1number {-o-animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2number {-o-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3number {-o-animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4number {-o-animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5number {-o-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}

@keyframes mymove
{
from {left:0px;}
to {left:600px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {left:0px;}
to {left:600px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:600px;}
}

@-o-keyframes mymove /* Opera */
{
from {left:0px;}
to {left:600px;}
}
</style>

<div id="div1number" class="div0number">linear</div>
<div id="div2number" class="div0number">ease</div>
<div id="div3number" class="div0number">ease-in</div>
<div id="div4number" class="div0number">ease-out</div>
<div id="div5number" class="div0number">ease-in-out</div>