CSS3 változás késleltetése

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