Animacje

W ostatniej części naszego kursu zajmiemy się animacjami, czyli czymś co urozmaici naszą stronę, lecz należy pamiętać, aby z nimi nie przesadzać!

Dodanie animacji do elementu HTML jest bardzo proste. Możemy wykorzystać do tego celu właściwość animation. Za pomocą wspomnianej właściwości animation możemy określić:

czas trwania animacji, czyli właściwość animation-duration
tempo animacji, czyli właściwość animation-timing-function
opóźnienie lub przyspieszenie animacji, czyli właściwość animation-delay
ilość powtórzeń animacji, czyli właściwość animation-iteration-count
kierunek powtarzania się oraz rozpoczęcia animacji, czyli właściwość animation-direction
dodatkowy wygląd elementu HTML przed lub po wykonaniu się animacji, czyli właściwość animation-fill-mode
zatrzymanie lub wznowienie aktualnej animacji, czyli właściwość animation-play-state

Przede wszystkim za pomocą właściwości animation możemy określić nazwę animacji (animation-name), jaka ma zostać dodana do danego elementu HTML, jednak pierw taką animację musimy sami utworzyć. W tym momencie zaczyna się nasza zabawa z... selektorami czasu animacji i regułą @keyframes.

Przykładowa reguła @keyframes:

		@keyframes nazwa_animacji
		{
			0% { background-color:white; }
			25% { background-color:gold; }
			50% { background-color:red; }
			75% { background-color:green; }
			100% { background-color:white; }
		}

Obok słowa kluczowego @keyframes należy umieścić nazwę jaką chcemy, aby posiadała nasza animacja (np. moja_animacja). Następnie umieszczamy nawiasy klamrowe i w tych nawiasach zapisujemy reguły animacji, które są tworzone za pomocą różnych dostępnych właściwości CSS (np. background-color). Przed każdą taką regułą należy umieścić selektor czasu animacji, którego wartość jest zapisywana za pomocą jednostek wyrażonych w procentach (np. 0%, 25%, itd.). Selektory czasu animacji należy umieszczać w uporządkowanej kolejności rosnącej (od najmniejszej wartości 0%, do największej wartości 100%).

Dołączmy teraz naszą animację do poniższego elementu za pomocą właściwości CSS:

		div {animation: nazwa_animacji czas_trwania}

Oczywiście animacje nie kończą się jedynie na zmienianiu kolorów tła, pozwalają również na inne ciekawe efekty. Poniżej znajdziecie kilka przykładów oraz kod w jaki sposób zostały osiągnięte.

przesuwanie

		@keyframes przesuwanie
		{
			0% { left: -100px; }
			100% { left: 100px; }
		}

zmiana rozmiaru

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

Animacje za pomocą właściwości transform

Do animacji możemy również użyć bardzo ciekawej właściwości transform, poniżej znajdziecie kilka przykładów jej zastosowania:

obracanie elementu

TEKST

		@keyframes obracanie_elementu
		{
			0% { transform:rotate(0deg); }
			100% { transform:rotate(360deg); }
		}

skalowanie elementu

TEKST

		@keyframes skalowanie_elementu
		{
			0% { transform:scale(1.0, 1.0); }
			100% { transform:scale(3.0, 2.0) }
		}

wykrzywianie elementu

TEKST

		@keyframes wykrzywianie_elementu
		{
			0% { transform:skew(0deg, 0deg); }
			100% { transform:skew(10deg, 20deg) }
		}

W celu zapoznania się z resztą właściwości transform odwiedź stronę: w3schools

Praktyczne zastosowanie animacji zobacz TUTAJ