Animacje CSS: Ulepsz swoją stronę dzięki tym 17 opcjom

Zachwycające animacje przyciągające wzrok podczas ładowania strony internetowej. Płynne przejścia prowadzące Cię bez wysiłku przez treści strony. Nieoczekiwane wybuchy kolorów i ruchu podczas interakcji z przyciskami w aplikacji.

Chociaż subtelne, te elementy znacząco wpływają na twoje postrzeganie marki oraz ogólne wrażenia cyfrowe. Jak więc ożywić te przyciągające uwagę detale? Często osiąga się to za pomocą animacji CSS.

W tym przewodniku pomożemy Ci to osiągnąć za pomocą:

• Wprowadzenie do CSS i animacji CSS
• Kluczowe powody, dla których warto wypróbować animacje CSS
• Kilka przeszkód w przyjęciu animacji CSS (z rozwiązaniami)
• 17 przykładowych animacji CSS do użycia na Twojej aplikacji lub stronie internetowej
• Jak zacząć dodawać CSS do swojej strony internetowej

Poznaj CSS

CSS to skrót od Cascading Style Sheets.

CSS to język kodowania, który dyktuje, jak elementy graficzne i treści na stronie internetowej lub aplikacji wyglądają i zachowują się. CSS jest przydatny do dostosowywania kolorów i czcionek, pozycjonowania i rozmieszczania elementów na stronie oraz, oczywiście, tworzenia animacji. Istnieją animacje „czystego” CSS, zbudowane tylko z kodu HTML (Hypertext Markup Language) i CSS, oraz animacje CSS, które włączają inne rodzaje kodów (jak JavaScript) lub istniejące media (jak GIFy).

CSS pojawiło się na scenie na początku lat 90. i od tego czasu ewoluowało od CSS1 do CSS2 do CSS3 — obecnej i powszechnie używanej wersji. W tym artykule będziemy stosować powszechną praktykę używania terminu „CSS” odnosząc się do tej najnowszej wersji.

HTML jest jak fundament i konstrukcja domu, bez którego dom nie może istnieć. Ale CSS przekształca ten dom poprzez malowanie, wykończenia i dekoracje, które nadają unikalny styl i funkcjonalność.

Budowanie Animacji CSS

Animacje CSS używają kodu CSS do łączenia różnych właściwości i wartości, które sprawiają, że elementy na ekranie „poruszają się”.

Właściwości CSS to elementy animacji, takie jak tło, promień obramowania, czcionka, margines, rodzaj ruchu (jak obrót lub zanikanie), itp. Wartości uzupełniają szczegóły dotyczące tych właściwości animacji, definiując kolor, wyrównanie, rozmiar, długość czasu, kierunek, prędkość, itp.

Przyjrzyjmy się elementom popularnej reguły @keyframes, która definiuje przejścia CSS w ciągu sekwencji animacji, jako przykład współpracy właściwości i wartości:

• Właściwość animation-name podaje nazwę animacji.
• Właściwość animation-duration określa długość animacji. Wartości są zwykle wyświetlane w sekundach (0s, 4s, itp.).
• Właściwość animation-delay określa opóźniony start animacji. Jej wartość również jest podawana w sekundach (-2s, 5s, itp.).
• Właściwość animation-iteration-count określa, ile razy animacja powinna się wykonać. Wartość reprezentuje, ile razy chcesz, aby animacja się powtórzyła; na przykład, infinite-alternate spowoduje, że będzie trwała w nieskończoność.
• Właściwość animation-direction mówi, jak animacja powinna być odtwarzana. Wartości obejmują normal (do przodu), reverse, alternate, itp.
• Właściwość animation-timing-function określa krzywą prędkości. Wartości obejmują ease-in-out dla łagodnego startu i końca, cubic-bezier do tworzenia skomplikowanej krzywej, itp.
• Właściwość animation-fill-mode definiuje, jak element wygląda, gdy animacja nie jest odtwarzana. Wartości obejmują forwards, aby zachować wartości ustawione przez ostatnią klatkę kluczową, itp.

Teraz połączmy to wszystko! W tym przykładzie z W3Schools, który przypisuje animację (o nazwie „example”) do elementu <div>, widać, że element ma 100 pikseli kwadrat i czerwone tło. Kiedy animacja się zaczyna, będzie trwała przez 4 sekundy, podczas gdy tło zmienia się z czerwonego na żółte:

/* Kod animacji */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* Element, do którego zostanie zastosowana animacja */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

(Uwaga: To jest tylko jeden przykład. Animacje kluczowe to nie jedyny sposób na tworzenie animacji CSS, i nie są kompatybilne z każdą wersją przeglądarki — czytaj dalej, aby uzyskać więcej wskazówek i porad dotyczących kompatybilności.)

3 fantastyczne powody, aby zaimplementować animacje CSS

Od zasilania niezapomnianych interakcji do zapewnienia, że odbywają się one z prędkością nowoczesnych oczekiwań, animacje CSS mają wiele do dodania do cyfrowego doświadczenia — zarówno dla Ciebie, jak i Twoich wspaniałych klientów lub odwiedzających.

Stwórz Unikalną Historię i Doświadczenie

Czasy, kiedy strony internetowe pełniły funkcję cyfrowych billboardów, są już przeszłością.

W globalnej gospodarce, strony internetowe i aplikacje są Twoją najlepszą możliwością, aby opowiedzieć historię Twojej marki.

Dlaczego skupić się na swojej historii? Ponieważ świetna historia wyróżnia twoją markę, przyciąga uwagę idealnej publiczności, tworzy trwałe połączenia i — co najważniejsze — inspiruje do działania.

A Twoja historia opiera się częściowo na interaktywnych elementach, które włączasz w swoje doświadczenie użytkownika.

Animacje CSS są wszystkim o tworzeniu unikalnych doświadczeń, które reagują na użytkownika i poruszają się razem z nim, budując relacje i zaangażowanie z historią Twojej marki.

Zmodernizuj i utrzymuj przy użyciu mniej klawiszy

CSS jest uporządkowanym i stosunkowo zwięzłym językiem kodowania. W świecie rozwoju stron internetowych jest znany jako „czysty”. Arkusze stylów mogą być zwykle ograniczone do minimum dla prostych projektów aplikacji i stron internetowych.

To oznacza, że kiedy nadejdzie czas na aktualizację projektu, wykonanie rutynowej konserwacji, czy odświeżenie wyglądu i doświadczenia — powinno być dość szybko zlokalizować, gdzie dokonać zmiany, stworzyć aktualizację i zastosować ją na całym interfejsie. Nie ma potrzeby ponownego kodowania i wdrażania wielu poszczególnych plików HTML.

Zoptymalizuj swoją szybkość

CSS jest uważane za “lekki” w porównaniu z JavaScriptem i innymi językami programowania, co czyni go świetnym narzędziem do dodawania dynamicznych, angażujących treści i doświadczeń do twojego produktu — bez dodawania ciężaru, który spowalnia ładowanie.

Ponadto ma tendencję do bycia agresywnie buforowanym. Razem, te czynniki oznaczają, że animacje stworzone przy użyciu CSS powinny szybko się wyświetlać po tym pierwszym kliknięciu, jak również przy kolejnych załadowaniach Twojej strony lub aplikacji.

Jako ważny czynnik rankingowy w przypadku wyników wyszukiwania Google, prędkość jest czymś, o czym powinny myśleć wszystkie firmy posiadające obecność online.

Rozważania przed zagłębieniem się w animacje CSS

Wkraczasz teraz w strefę spowolnienia. Zanim rzucisz się w wir animacji CSS, chcemy upewnić się, że jesteś świadomy kilku drobnych przeszkód i przygotowany, aby sobie z nimi poradzić.

Problemy z Kompatybilnością

Czy zauważyłeś kiedyś, że niektóre funkcje zdają się znikać lub przeszkadzać, gdy korzystasz ze strony internetowej na telefonie — lub znacznie spowalniają twój komputer?

Różne urządzenia (telefony komórkowe, smartwatche, tablety, komputery itp.) i przeglądarki (Chrome, Safari, Firefox itp.) są tworzone przy użyciu różnych technologii. Te technologie sprawiają, że sposób, w jaki oddziałują z językami kodowania, może się różnić — i nie jest inaczej w przypadku animacji CSS.

Jeśli nie dokonasz własnych dostosowań, efekt animacji, który wygląda niesamowicie fajnie na Firefox na twoim laptopie, może wyglądać lub zachowywać się dziwnie dla kogoś, kto ogląda go za pomocą Safari na swoim telefonie.

Kontrola jakości (QA) testów jest kluczowa, aby zapewnić kompatybilność twoich animacji CSS we wszystkich miejscach, gdzie użytkownicy wchodzą w interakcję z twoją obecnością cyfrową.

Rozwiązanie: Użyj walidatora CSS oraz narzędzi deweloperskich przeglądarki do identyfikacji problemów z kompatybilnością i błędów podczas tworzenia CSS. Osoby szczególnie zaznajomione z kodem mogą zainstalować bibliotekę mixin Sass taką jak Bourbon, aby utrzymać prefiksy przeglądarek (webkit dla Chrome i Safari, moz dla Firefox, itd.) aktualne i kompatybilne.

17 dynamicznych animacji CSS do wypróbowania dziś

Gotowy do wykorzystania animacji CSS, aby tworzyć niesamowite cyfrowe doświadczenia, które przyciągają i zatrzymują użytkowników? Gotowy do zwiększenia tak ważnej prędkości strony oraz zmniejszenia czasu na konserwację i ponowne projektowanie?

W takim razie jesteś we właściwym miejscu! Zebraliśmy kilka niesamowitych animacji CSS dla Twojej przyjemności. Kliknij dowolną opcję, która przyciąga Twoją uwagę, aby uzyskać potrzebny kod, a następnie możesz dodać go do arkusza stylów swojej strony internetowej. (Dla informacji, publiczne Pisy na CodePen są darmowe do użytku przez każdego w dowolnym celu zgodnie z ich szczegółami licencji.)

Animacje Ładowania

Animacje ładowania może nie są najbardziej ekscytującą klasą animacji CSS, ale są kluczowe dla doświadczenia użytkownika. Odwiedzający aplikacje i strony internetowe są bardziej skłonni do cierpliwości przy nieco dłuższym czasie ładowania, gdy dostarczysz im wskaźnik, że coś wspaniałego wkrótce się pojawi.

1. “Loader CSS z kropkami” autorstwa Aliaksei Peterson

Do tej pory pulsująca linia kropek jest uniwersalnym symbolem “Chwileczkę!” Podobnie jak kod, ta opcja jest jasna i zwięzła, co czyni ją dobrą propozycją dla obecności online o poważnym tonie lub minimalistycznym stylu.

Zobacz projekt
Ładowarka CSS z kropkami autorstwa Aliaksei Peterson (@petersonby)
na CodePen.

2. “Proste ładowarki HTML & SVG” autorstwa Stephena Delaney 

Kolejny klasyczny symbol ładowania — wirnik. Ta animacja oferuje opcję integracji SVG, co oznacza Scalable Vector Graphic, co może być skalowane bez utraty jakości.

Zobacz Pen
Proste animacje ładowania HTML & SVG autorstwa Stephena Delaney (@sdelaney)
na CodePen.

3. “Animacja Ładowania” autorstwa Mohameda Yousefa

Ten obracający się zestaw kształtów przypominających łzy oferuje pięknie prostą animację, w której można się zatracić, sprawiając, że nawet nieco dłuższy czas ładowania staje się mniej irytujący. Czego więcej można by sobie życzyć?

Zobacz Pen
Animacja Ładowania autorstwa Mohamed Yousef (@Freeps2)
na CodePen.

4. “Tylko animacja CSS #02” autorstwa Hisami Kurita

Imponująca animacja w czystym CSS, która przypomina wejście na stronę ekskluzywnej restauracji lub hotelu. Zmień kolor i nazwę, aby dopasować do swojej własnej marki.

Zobacz Pióro
Only Css Animation #02 autorstwa Hisami Kurita (@hisamikurita)
na CodePen.

5. “Ładowarka świecąca – animacja CSS bez dodatków” autorstwa Maxime Rossignol

Najbardziej kreatywny ekran ładowania, jaki widzieliśmy, ta animacja daje widzowi wiele do oglądania podczas oczekiwania na ożywienie reszty twoich cyfrowych elementów.

Zobacz Długopis
Świecący Loader – Animacja CSS autorstwa Maxime Rossignol (@Maxoor)
na CodePen.

Animacje Treści

Szukasz sposobu, aby upewnić się, że użytkownicy Twojej aplikacji i strony internetowej nie przegapią ważnych informacji? Wyróżnij je jedną z tych animacji CSS.

6. “Zmiana Animacji Tekstu CSS” autorstwa Coding Yaar

Dodaj trochę uroku nagłówkom i innym ważnym tekstom dzięki tej animacji, zawierającej detale takie jak ruch wsuwania, zmiany kolorów i więcej.

Zobacz Pióro
Zmieniająca się Animacja Tekstu CSS autorstwa Coding Yaar (@codingyaar)
na CodePen.

7. “Efekt odsłaniania bloku CSS” autorstwa Abubaker Saeed

Efekt “ujawniania” z tą animacją oferuje kolejny interesujący sposób na przyciągnięcie uwagi do ważnych elementów treści, które chcesz upewnić się, że odwiedzający nie przegapią.

Zobacz Pen
Efekt Odsłaniania Bloku CSS autorstwa Abubaker Saeed (@AbubakerSaeed)
na CodePen.

8. “Przesuwnik Odsłaniający CSS” autorstwa Adama Kuhna

Z mnóstwem interesujących czcionek, animowanymi przyciskami oraz funkcją obracania, która odsłania więcej informacji — wydaje się to świetną opcją, aby przedstawić użytkownikom dłuższe fragmenty treści, których nie można przegapić, takie jak Najczęściej Zadawane Pytania, funkcje, itp.

Zobacz Pen
Slider z Odkrywaniem CSS autorstwa Adama Kuhna (@cobra_winfrey)
na CodePen.

9. “Animowana Karta Informacyjna” autorstwa Adama Kuhna

Od tego samego twórcy poprzedniej animacji CSS, ta opcja prezentuje kolejny odważny i kreatywny sposób, aby przeprowadzić użytkowników przez elementy historii Twojej marki.

Zobacz Długopis
Animowana Karta Informacyjna autorstwa Adama Kuhna (@cobra_winfrey)
na CodePen.

Animacje przycisków

Przyciski są często bramą do skłonienia użytkowników do podjęcia działań lub zagłębienia się w Twojej treści. Zachęć do interakcji, dodając animacje CSS do ważnych przycisków.

10. “Efekt przesuwania przycisku CSS po najechaniu myszą” autorstwa RazorX

Wiele opcji dodania fajnych animacji wypełniających kolorem do zwykłych przycisków.

Zobacz Pen
Efekt przesuwania przycisku CSS po najechaniu autorstwa RazorX (@RazorXio)
na CodePen.

11. “Animacje przycisków” autorstwa Alexa Belmonte

Chcesz dodać trochę ruchu do swoich przycisków? Dodaj efekt najechania i akcje takie jak odbijanie, kołysanie i inne do swoich przycisków za pomocą tego CSS.

Zobacz długopis
Animacje przycisków autorstwa Alexa Belmonte (@AlexBelmonte)
na CodePen.

12. “Efekt najechania myszką na przycisk CSS” autorstwa Julii

Minimalne, ale znaczące dodanie koloru dodaje element zaskoczenia i zachwytu do twoich przycisków.

Zobacz projekt w
Efekt najechania przyciskiem CSS autorstwa Julii (@sfoxy)
na CodePen.

Animacje tła

Chcesz, aby tła poszczególnych elementów Twojej strony internetowej lub aplikacji były właśnie na tyle interesujące, aby przyciągnąć uwagę — bez przyćmiewania tego, co chcesz, aby użytkownicy czytali i robili.

13. “Animowany Gradient Tła” autorstwa Mario Klingemann

Zastosuj tę nieskończoną pętlę kolorów na tle kluczowych sekcji Twojej strony internetowej lub aplikacji, aby dodać odrobinę ruchu.

Zobacz Pen
Animowany Gradient Tła autorstwa Mario Klingemann (@quasimondo)
na CodePen.

14. “Animacje CSS z SVG” autorstwa Joyanna

Miękkie, kolorowe kształty z delikatnymi ruchami stanowią charakterystyczne tło dla najważniejszych sekcji treści.

Zobacz Pen
Animacje CSS z SVG autorstwa Joyanna (@joyanna)
na CodePen.

15. “Prosty przewijany paralaks” autorstwa Ungmo Lee

Animacja przewijania paralaksy umożliwia ruch zarówno pierwszego planu, jak i tła, ale z różnymi prędkościami, co tworzy iluzję głębi. Jak można zauważyć na przykładzie, efekt paralaksy może być przytłaczający, gdy nie jest stosowany z umiarem.

Zobacz Pen
Proste przewijanie paralaksy autorstwa Ungmo Lee (@ungmo2)
na CodePen.

Animacje Wszędzie

Wypróbuj te animacje CSS dla zabawy, aby dodać trochę *smaczku* w różnych punktach interakcji użytkownika.

16. “Szablon: Logo” autorstwa Alexa Katza

Najedź kursorem na logo, aby zobaczyć lekkie powiększenie. Ten subtelny ruch może być stosowany na logo, jak również na przyciskach, ikonach i innych komponentach.

Zobacz Pióro
Szablon: Logo autorstwa Alexa Katza (@katzkode)
na CodePen.

17. “Animacja Pływająca – CSS” autorstwa Mario Duarte

Delikatny efekt unoszenia się, taki jak ten, to kolejny zaskakujący i zabawny element, który pozwala widzom wiedzieć, że dbasz o swoje cyfrowe właściwości oraz o ich doświadczenia.

Zobacz Pen
Animacja Pływająca – CSS autorstwa Mario Duarte (@MarioDesigns)
na CodePen.

Jak dodać CSS do Twojej strony

Każda z powyższych animacji CSS jest uzupełniona o HTML, CSS i czasami inny kod, który możesz bezpośrednio wkleić do arkusza stylów swojej strony i edytować według potrzeb, aby dostosować go do swoich wymagań.

Jeśli posiadasz niestandardową stronę internetową, gdzie sam zarządzasz kodem i nie znasz jeszcze CSS, myślimy, że byłoby pomocne, gdybyś najpierw zapoznał się z tym językiem, zanim spróbujesz zaimplementować powyższe animacje. Naucz się podstaw tworzenia linii kodu, a następnie zgłębiaj najlepsze samouczki do rozwijania swoich umiejętności CSS z przewodnikiem DreamHost do nauki CSS.

Zauważysz z powyższych przykładów, że stworzenie animacji może wymagać sporo kodu. Jeśli czujesz się komfortowo z CSS i jesteś gotowy do optymalizacji pod kątem przestrzeni i czasu, rozważ wykorzystanie biblioteki animacji CSS. Każda biblioteka będzie miała instrukcje, jak dodać ją do Twojej strony internetowej, zazwyczaj polegające na dodaniu pliku źródłowego lub CDN do Twojego znacznika. Po zainstalowaniu możesz użyć specyficznego skrótu animacji biblioteki, aby dodać swoje animacje.

Jeśli korzystasz ze strony WordPress, sama platforma oferuje przydatny przewodnik do edycji CSS za pomocą albo Edytora Strony (funkcja beta dostępna w niektórych motywach) albo Dostosowywacza (dostępny w większości klasycznych i niektórych motywach stron trzecich). W tych ekranach edycyjnych wkleisz kod z naszych przykładów animacji CSS powyżej.

A co jeśli strona internetowa, która pozwala opowiedzieć historię Twojej marki, jest nadal tylko marzeniem? W takim razie mamy dobre wieści, ponieważ w DreamHost specjalizujemy się w realizacji marzeń o stronach internetowych. Z indywidualnym projektowaniem stron, łatwym w użyciu kreatorem stron WordPress website builder, usługami profesjonalnymi od naszych ekspertów wewnętrznych oraz oczywiście solidnymi opcjami hostingu — DreamHost pomoże Ci wprowadzić Twoje marzenie w życie online.