Pierwszym etapem będzie utworzenie samej animacji w css, tworząc tak zwaną regułę:

						
				@keyframes nazwa
				{
				 from{właściwość: wartość;}
				 to{właściwość: wartość;}
				}
					

Właściwości, które podaliśmy w form odpowiadają za stan początkowy elementu. Następnie element będzie płynie przechodził do stanu opisanego wartościami w to .Jeżeli chcielibyśmy dodać stany przejściowe możemy użyć procentów między form i to .

Drugim etapem jest przypisanie animacji do elementu.Do wykonania tego przyda nam się właściwość animation posiadająca kilka wartości.

					
		animation:  nazwa_animacji czas_trwania_w_sekundach 
		ilość_powtórzen sposób_odtwarzania tempo_wykonania;
		
				   

Można te wartości zapisywał jako osobne właściwości:

• czas trwania - animation-duration
• tempo - animation-timing-function
• opóźnienie lub przyspieszenie - animation-delay
• ilość powtórzeń - animation-iteration-count
• kierunek powtarzania się oraz rozpoczęcia - animation-direction

Działanie animacji:

Jej reguła:

				@keyframes zmiana_rozmiaru
				{
				 0% { width: 500px; }
				 100% { width: 50px; }
				}
					

Przydatną właściwością przy animacjach jest transform . Ustawiając odpowiednie wartości możemy przekształcić nasz element na wile sposobów:

• Wykonać translacje elementu, dziękitranslate (x,y)
• Obrócić o x stopni, dzięki rotate(xdeg)
• Przeskalować w skali x, dzięki scale (x)
• Skrzywić nasz element o x stopni i nachylić o y stopni, dzięki skew (xdeg,ydeg)

przykład transform:

Oraz reguła:

			@keyframes skret_elementu
			{
			 0% { transform:rotate(0deg); }
			 100% { transform:rotate(180deg); }
			}