A transition-delay tulajdonság segítségével adható meg, a CSS tulajdonság(ok) változásainak késleltetése. Hány másodperccel kezdődjön később az átmenet.
Az átmenet késleltetésének beállítása:
kijelölő
{
transition-delay
:
érték;
}
Vesszővel elválasztva több tulajdonság is megadható.
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: 1s;
-webkit-transition-duration: 1s;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;}
#palya div.linear_1 img {
transition-property: transform;
-webkit-transition-property: transform;
transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
transition-delay: 1s;
-webkit-transition-delay: 1s; }
#palya div.linear_2 img{
transition-property: transform;
-webkit-transition-property: transform;
transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
transition-delay: 2s;
-webkit-transition-delay: 2s;
}
</style>
....
<body>
<div id="palya">
<div>Késleltetés: 0s
<div class="linear"><img src="labda_k1.png"...> </div>
</div>
<div>Késleltetés: 1s
<div class="linear_1"><img src="labda_k.png" ...> </div>
</div>
<div>Késleltetés: 2s
<div class="linear_2"><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_kesleltetes_01.html