Transitions

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

Vlastnosti:

• transition - Pro nastavení všech čtyř přechodových vlastností do jediné vlastnosti. (transition: animovaná vlastnost délka animace typ animace za jak dlouho začne)
• transition-delay - Za jak dlouho přechod začne.
• transition-duration - Doba trvání přechodu.
• transition-property - Vlastnost na které se má přechod provést.
• transition-timing-function - Určuje rychlostní křivku přechodového efektu.

Transition
Provede animaci vlastnosti opacity v délce 1 vteřiny stylem ease-in-out, která začne 2 vteřiny po najetí myši.

  .div1 {
  width: 500px;
  height: 100px;
  background: lime;
  transition: opacity 1s ease-in-out 2s ;
}
  .div1:hover {
   opacity:0;
}

...

 <div class="div1">    </div>
 

Přidává do transformace přechodový efekt.

 
 .div2 {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}
.div2:hover {
  width: 300px;
  height: 300px;
  transform: rotate(360deg);
}

...

 <div class="div2">    </div>
  

Transition-delay

Po najetí myši na text po 1 vteřině zčervená.

 #zpozdeni {

transition: color 3s;
  transition-delay: 1s;
}

#zpozdeni:hover {
  color:red ;
}

...

 <p id="zpozdeni">Po najetí myši text po 1 vteřině zčervená.     </p>
  

Transition-duration Transition-property

#trvani {
transition-duration :4s; 
transition-property: background;
  
}

#trvani:hover {
  background: red;
  
}

...


 

Transition-timing-function

• ease - Pomalý start, rychlým střed a pomalý konec (výchozí).

   .ease {
    width: 50px;
    height: 50px;
    background: lime;
    transition: width 5s;
  }
    #timing:hover {
    width: 500px;
  }  
  
  ...
  
   <div id=timing class="ease" style="transition-timing-function: ease;">  </div>
       
          

• linear - Přechodový efekt se stejnou rychlostí od začátku do konce.
• ease-in - Přechodový efekt s pomalým startem.
• ease-out - Přechodový efekt s pomalým koncem.
• ease-in-out - Přechodový efekt s pomalým začátkem a koncem.
• cubic-bezier(0.1, 0.7, 1.0, 0.1) - Přechodový efekt s vlastním nastavením.