Animacje

Nawet nie będę tego próbował ukrywać – animacje to moim zdaniem jedna z najfajniejszych funkcjonalności dostępnych w CSS 😀. Dzięki nim możemy wprowadzić nieco “życia” do naszych stron bez konieczności używania JavaScript. Tworzone przez nas animacje mogą być stosunkowe proste jak na przykład delikatne powiększenie przycisku po najechaniu na niego myszką lub dość skomplikowane i wyglądać jak prosty film animowany.

Zanim przejdziemy do omawiania poszczególnych właściwości CSS, musimy zrozumieć, że animacja wykonana za pomocą CSS to nic więcej niż tylko zmiana wartości poszczególnych właściwości w pewnym czasie. Tak więc przykładowo, zamiast natychmiast zmieniać szerokość jakiegoś elementu z 20px na 40px po najechaniu na niego myszką – szerokość tą będziemy zmieniać przez określony czas, np. 2 sekundy. Mając to w głowie, możemy przechodzić już do tematów omawiających poszczególne składniki składające się na animacje w CSS. Temat ten będzie dość obszerny, ale gwarantuję, że będzie jednocześnie bardzo przyjemny i nauczy Cię jednej z najciekawszych funkcjonalności w CSS 🙂

🔗 Dodatkowe materiały:

• CSS Animation in 100 Seconds