CSS3 animáció időkarakterisztikája

Az animation-timing-function tulajdonság segítségével adható meg, a CSS tulajdonság(ok) változásainak karakterisztikája.

Lehetséges értékei:

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ó

Az időkarakterisztika beállítása:

kijelölő

{

animation-timing-function

kulcsszó

;}

1. Példa:

Forráskód


<style>
#palya div {width: 70px; height:200px; 
            margin: 0; float:left; padding: 0; }
@keyframes labda_anim_1 { 
    0% { top:1px; left:0px; 
         transform: rotate(1deg);}
   50% { top:320px; left:0px; 
         transform: rotate(180deg);}
  100% { top:1px; left:0px; 
         transform: rotate(359deg);}
}
@-webkit-keyframes labda_anim_1 { 
  0% {top:1px; left:0px; 
     -webkit-transform: rotate(1deg);}
 50% {top:320px; left:0px; 
     -webkit-transform: rotate(180deg);}
100% {top:1px; left:0px; 
     -webkit-transform: rotate(359deg);}
}
#palya div.labda_1 img { position:relative;
          animation-name: labda_anim_1;
  -webkit-animation-name: labda_anim_1;
          animation-duration: 2s;
  -webkit-animation-duration: 2s;
          animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
          animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}
#palya div.labda_2 img { position:relative;
...
          animation-timing-function: ease;
  -webkit-animation-timing-function: ease; 
} 
#palya div.labda_3 img{ position:relative;
...
          animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out; 
}
</style>     
... 
<body>   
  <div id="palya" class="palya" >
    <div id="labda_2_div">
      <div class="labda_1" ><img src="..." ...> </div>
    </div>
    <div id="labda_2_div">
      <div class="labda_2"><img src="..." ...> </div>
    </div>
    <div id="labda_3_div">
      <div class="labda_3"><img src="..." ...> </div>
    </div>    
 </div>
</body>

Eredmény*

* 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_pattog_03.html