Do tworzenia animacji służy właściwość transform.

Aby były odpowiednio interpretowane przez przeglądarkę poleca sie użyć przedrostków:

• -webkit (chrome, safari)
• -o (opera)
• -moz (mozilla)
• -ms (edge)

służy do obracania elementu, jako atrybut podaje się ilość stopni, pod jakim ma się obrócić.
służy do zmieniania wielkości elementu, jako atrybut podaje się liczbę, razy ile ma się powiększyć, czyli

• 0-1 → pomniejszenie
• 1-x → powiększenie

Można dowolnie łączyć ze sobą właściwości:





Lustarzane odbicie:

1. Definicja animacji
2. Zastosujemy animację do elemnetu
   
   
   @keyframes'nazwa'

   {

   form

   : {

   left

   :

   120%

   };

   to

   {

   left

   :

   0%

   }; }
   
   
   
3. Przypisujemy aniamcję do elemntu - podajemy nazwe animacji i czas w jakim ma trwać
   
   
   #div

   {

   animation

   :

   nazwa

   3s

   ; }
   
   
   

animation-duration → czas trwania animacji
animation-name → nazwa animacji
animation-iteration-count → liczba powtórzeń (infinite = nieskończoność)
animation-direction: alternate (aniamcja będzie szła po elemntach w kolejności 1,2,3→3,2,1)
animation-delay → opóźnienie
animation-timing-function → tempo (linear = wciąż takie same, easy-in = wolne przyjście, easy-out = wolne odejści)