CSS3 átmenetek létrehozása

A CSS tulajdonságok változását folyamatossá tehetjük.

A transition-property jellemző segítségével adható meg, hogy mely CSS tulajdonság(ok) változásait kívánjuk folyamatos átmenetté alakítani.

Az átmenettel érintett tulajdonságok neveinek megadása:

kijelölő

{

transition-property

kulcsszó,

kulcsszó

...;}

Vesszővel elválasztva több tulajdonság is megadható.
Az all kulcsszó segítségével valamennyi jellemző változása folyamatossá tehető.

Az átmenet időtartamának beállítása:

kijelölő

{

transition-duration

érték,

érték

...;}

Vesszővel elválasztva több tulajdonság is megadható.
Az időtartam megadása kötelező. Mértékegysége lehet s vagy ms.

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;
}
#palya div.linear_1 img {
          transition-property: transform;
  -webkit-transition-property: transform;
          transition-duration: 3s;
  -webkit-transition-duration: 3s;
} 
#palya div.linear_2 img{
         transition-property: transform;
 -webkit-transition-property: transform;
         transition-duration: 5s;
 -webkit-transition-duration: 5s;
}
</style>     
   </head> 
<body>   
  <div id="palya">Transform (1s)
    <div>
      <div class="linear"><img src="labda_k1.png"...> </div>
    </div>Transform (3s)
    <div>
      <div class="linear_1"><img src="labda_k.png" ...> </div>
    </div>Transform (5s)
    <div>
      <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_transition_01.html