WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

CSS3 átmenetek változó sebességgel



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