A transition-timing-function tulajdonság segítségével adható meg, a CSS tulajdonság(ok) változásainak karakterisztikája.
Az átmenet időkarakterisztikájának beállítása:
kijelölő
{
transition-timing-function
:
kulcsszó;
}
Vesszővel elválasztva több tulajdonság is megadható.
A választható karakterisztikák:
linear: állandó sebességűease: a változás eleje és vége lassú, közepén gyors
ease-in: a változás eleje lassú, majd gyorsul
ease-out: gyors változás a végén lassul
ease-in-out: a változás eleje és vége lassú, közepén gyors
cubic-bezier(n,n,n,n): egyéni karakterisztika leírására használható
1. Példa:
Forráskód
<style>
#palya {width: 420px;}
#palya div {
width: 420px; margin: 2px 0;
padding: 1px; color: white;}
#palya:hover img {
-webkit-transform: translateX(350px) rotate(340deg);
-moz-transform: translateX(350px) rotate(340deg);
-o-transform: translateX(350px) rotate(340deg);
-ms-transform: translateX(350px) rotate(340deg);
transform: translateX(350px) rotate(340deg);
}
#palya div.linear img {
transition-property: transform;
-webkit-transition-property: transform;
transition-duration: 3s;
-webkit-transition-duration: 3s;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;}
#palya div.ease img {
transition-property: transform;
-webkit-transition-property: transform;
transition-duration: 3s;
-webkit-transition-duration: 3s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;}
#palya div.easein img{
transition-property: transform;
-webkit-transition-property: transform;
transition-duration: 3s;
-webkit-transition-duration: 3s;
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;}
#palya div.easeout img{
transition-property: transform;
-webkit-transition-property: transform;
transition-duration: 3s;
-webkit-transition-duration: 3s;
transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;}
#palya div.easeinout img {
transition-property: transform;
-webkit-transition-property: transform;
transition-duration: 3s;
-webkit-transition-duration: 3s;
transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;}
</style>
....
<body>
<div id="palya">Transform (1s)
<div>
<div class="linear"><img src="labda_k1.png"...> </div>
</div>Transform (3s)
<div>
<div class="ease"><img src="labda_k.png" ...> </div>
</div>Transform (5s)
....
<div>
<div class="easeinout"><img src="labda_k.png" ...> </div>
</div>
</div>
</body>
Eredmény*
Az egérkurzorral a zöld területre kell mutatni!* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css3_labda_idokarakterisztika_01.html