Ożyw swoje strony internetowe za pomocą animacji CSS i przejść

Projekty stron internetowych nieustannie ewoluują. Od responsywnego projektu, pięknej typografii, idealnego schematu kodowania kolorów, ilustracji, twórcy strony codziennie wymyślają nowe pomysły i projekty.

W dzisiejszych czasach użytkownicy mają wysokie oczekiwania wobec interfejsów użytkownika ze względu na tak wysokiej jakości treści dostępne w Internecie. Interfejsy stron internetowych ewoluują, podobnie jak technologia, która za nimi stoi. Jednym z głównych komponentów odpowiedzialnych za ulepszenie interfejsu strony jest CSS.

CSS lub kaskadowe arkusze stylów są odpowiedzialne za uczynienie witryn bardziej interaktywnymi poprzez zdefiniowanie ich stylu, układu, projektów. Najnowszy standard CSS, czyli CSS3, wprowadził koncepcję animacji i transformacji, które poprawiają wrażenia użytkownika, dodając dodatkową głębię do interfejsu użytkownika. Dzięki animacjom i przejściom CSS możesz opowiadać historie, tworzyć zachwycające efekty i sprawić, że interakcja użytkownika z Twoją witryną będzie bardziej efektywna i znacząca.

Animacja to po prostu symulacja ruchu, która jest tworzona przez wyświetlanie serii obiektów, takich jak obrazy, jeden po drugim. Z drugiej strony przejście jest zasadniczo procesem, w którym obiekt przechodzi z jednego stanu do drugiego. Ale kiedy mówimy o animacjach internetowych, istnieją zasadniczo trzy typy – animacje CSS lub animacje klatek kluczowych, przejścia CSS i animacje JavaScript.

Animacje CSS

Aby tworzyć animacje w CSS, musimy zmienić właściwości CSS elementu, takiego jak obraz lub tekst, na określony czas. Właściwości elementów możemy zmieniać tyle razy, ile chcemy, a także możemy ustawić czas trwania animacji.

Określanie @klatek kluczowych

Animacje CSS są definiowane bitowo za pomocą klatek kluczowych. Te klatki kluczowe są pośrednimi punktami animacji. Wszystkie animacje CSS są określone w regule @keyframes. Te klatki kluczowe określają, co dzieje się z elementem w określonym momencie, tj.

• jakie właściwości się zmieniają
• kiedy element jest animowany
• jak element się ożywia

Możesz zdefiniować własną klatkę kluczową jako:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Tutaj „do" i „z” określają początek i koniec animacji. Możemy również określić animacje dla pośrednich momentów między początkiem a końcem w następujący sposób:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Tutaj 0% reprezentuje początek animacji, 100% reprezentuje koniec animacji, a 50% oznacza zmianę pomiędzy początkiem a końcem. Ale jak powiedzieć przeglądarce, jak długo ma trwać animacja? Robimy to za pomocą pewnych właściwości animacji. Te właściwości animacji są powiązane z elementem, który ma być animowany. Na przykład:

element_name
{
animation_property: value;
style_property: value;
}

W tym przypadku elementem może być dowolny znacznik HTML, taki jak div, span, img, p itp. oraz style_propertydowolna właściwość stylu CSS, taka jak kolor tła, szerokość, wysokość itp. Przyjrzyjmy się teraz bliżej niektórym właściwościom animacji.

1. @keyframes: Klatki kluczowe służą do określania kodu animacji, jak omówiono powyżej.
2. animacja-nazwa: Nazwa określona przez @klatki kluczowe to nazwa animacji. Ta nazwa jest używana do odwoływania się do klatek kluczowych z elementem, który ma być animowany.
3. animacja-duration: Służy do określenia czasu trwania animacji w sekundach lub milisekundach. Na przykład, jeśli ustawimy go na 5 sekund, animacja będzie działać tylko przez 5 sekund. Jeśli nie ustawimy tej właściwości, animacja w ogóle się nie uruchomi, ponieważ jej domyślna wartość to 0.
4. animacja-opóźnienie: Możemy opóźnić rozpoczęcie animacji, określając czas opóźnienia animacji. Na przykład, jeśli chcesz rozpocząć animację 5 sekund po załadowaniu strony w przeglądarce, po prostu ustaw opóźnienie animacji na 5s.
5. animacja-kierunek: Za pomocą tej właściwości możemy powiedzieć przeglądarce, czy animacja porusza się w odwrotnym kierunku, czy zmienia cykle. Na przykład, jeśli chcesz, aby animacja przebiegała od początku do końca, ustaw wartość czasu trwania animacji na „normalny”. Jeśli chcesz, aby działał od końca do początku, po prostu ustaw wartość na „odwrotną”.
6. tryb-wypełnienia animacji: Możemy określić styl elementu, gdy animacja nie jest odtwarzana w tym trybie, tj. gdy animacja jest opóźniona lub zakończona, jaki powinien być styl elementu.
7. animacja-iteracja-liczba: Liczba odtworzeń animacji jest reprezentowana przez tę właściwość. Na przykład, jeśli chcesz odtworzyć animację raz, ustaw ją na 1 lub jeśli chcesz, aby animacja była odtwarzana w nieskończoność, po prostu ustaw „nieskończoność”.
8. animacja-timing-funkcja: Ta właściwość służy do określania krzywej prędkości animacji, takiej jak liniowa, przyspieszenie lub zwolnienie.
9. Animacja: Jest to skrócona właściwość służąca do ustawiania wszystkich właściwości animacji.

Na przykład możesz animować odbijający się obiekt za pomocą następującego fragmentu kodu. Zwróć uwagę, jak użyto tutaj skróconej notacji animacji.

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}
 
.stage:hover .object {
 animation: slide 2s linear;    /*shorthand animation property*/
}
 
.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Przejścia

Przejścia CSS są stosowane do właściwości elementów przez określony czas w oparciu o określone funkcje czasowe, czyli funkcje łagodzenia. Przez funkcję czasową rozumiemy funkcję, która zmieni właściwości elementów z jednego stanu na inny, jak postęp liniowy, przyspieszenie lub zwolnienie. Być może zauważyłeś, że obraz przesuwa się lub przekształca w inny obraz po najechaniu kursorem lub dźwięk jest odtwarzany po kliknięciu myszą. To wszystko są efekty przejścia, które mogą sprawić, że witryna będzie interaktywna.

Funkcje dynamiki są ważne przy tworzeniu przejść. Określają, w jaki sposób zmienią się właściwości. Mogą również zmieniać szybkość, z jaką zmienia się wartość właściwości od punktu początkowego do punktu końcowego przejścia. Możesz zastosować przejścia w następujący sposób:

element
{
style_property: value;
transition_property: value;
}

Tutaj element określa element HTML, który chcesz przekształcić, np. div, H1, img itp. Właściwość_style to styl CSS zastosowany do tego elementu. Przyjrzyjmy się teraz niektórym właściwościom przejścia :

• właściwość przejścia: Efekt przejścia będzie zawsze stosowany do właściwości CSS elementu, takich jak jego szerokość, wysokość, kolor lub kształt. Wartość tego atrybutu określa tę właściwość CSS elementu. Efekt przejścia rozpocznie się za każdym razem, gdy zmieni się ta właściwość, na przykład po najechaniu myszką lub kliknięciu.
• funkcja czasu przejścia: Jest to funkcja łatwości, która ma zostać zastosowana do elementu. Właściwość ta służy do określenia krzywej prędkości przejścia, takiej jak łatwość wejścia, łatwość wyjścia, liniowość itp.
• czas trwania przejścia: To jest tak samo jak właściwość czasu trwania animacji. Służy do określenia czasu trwania efektu przejścia w sekundach lub milisekundach. Na przykład, jeśli ustawimy go na 5 sekund, efekt przejścia zakończy się za 5 sekund. Jeśli nie ustawimy tej właściwości, to w ogóle nie będzie przejścia, ponieważ jej domyślna wartość to 0.
• przejście-opóźnienie: Za pomocą tej właściwości możemy określić czas trwania opóźnienia efektu przejścia. Na przykład, jeśli chcesz rozpocząć efekt 5 sekund po najechaniu myszką, po prostu ustaw opóźnienie przejścia na 5 sekund.
• przejście: Jest to skrócona właściwość do ustawiania wszystkich powyższych właściwości przejścia razem.

Na przykład poniższy kod zmieni szerokość elementu div po najechaniu myszką. Zobacz zastosowaną tutaj skróconą właściwość przejścia.

div {
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

Animacje a przejścia

Podobieństwa między animacjami a przejściami

• Zarówno przejścia, jak i animacje służą do wizualizacji zmian we właściwościach elementu.
• Możemy określić czas trwania przejścia i animacji.
• Mamy pewne funkcje czasowe, które zmieniają szybkość przechodzenia od jednej wartości do drugiej dla przejść, a także animacji.

Różnice między animacjami a przejściami

• Przejścia CSS są reaktywne. Muszą być uruchamiane przez użytkowników. Z drugiej strony animacje są uruchamiane za każdym razem, gdy strona ładuje się w przeglądarce. Nie muszą być uruchamiane.
• Przejścia działają raz, a następnie zatrzymują się. Następnie musimy je wielokrotnie uruchamiać, podczas gdy animacje mogą się zapętlać. Mogą wystartować na własnym przystanku, a następnie ponownie wystartować.
• Przeglądarka sama zajmuje się przejściami. Musimy tylko określić początek i koniec przejścia. Możemy ustawić efekt przejścia, ale nie możemy zmienić tempa zmian przejścia pomiędzy nimi. Na przykład, jeśli obraz przesuwa się po najechaniu myszką, po prostu zobaczymy, jak zanika lub zanika, gdy na niego najedziemy.
• Z drugiej strony animacje zapewniają elastyczność zmiany właściwości między początkiem a końcem. Dzieje się to za pomocą klatek kluczowych. Na przykład możemy ustawić kolor obrazu na czerwony przez pierwsze 5 sekund, potem niebieski przez następne 5 sekund, potem zielony przez następne 5 sekund i żółty przez ostatnie 5 sekund animacji. Mamy więc kontrolę nad animacjami.

Prefiksy dostawców

Wszystkie funkcje CSS3 nie są obsługiwane przez każdą przeglądarkę. Dlatego używamy przedrostków wzdłuż tych właściwości CSS dla określonych przeglądarek, takich jak -webkit- (Safari), -moz- (Firefox) lub -o- (Opera). Dzięki temu znaczniki przeglądarki mogą dodać obsługę tej funkcji CSS3. Te prefiksy są znane jako prefiksy dostawcy lub prefiksy przeglądarki CSS. W związku z tym musimy umieścić przedrostki dostawców wraz z właściwościami animacji i przejścia. Rozważmy na przykład poniższy kod i zobaczmy, w jaki sposób zostały użyte prefiksy dostawcy przeglądarki Safari:

div {
width: 100px;
height: 100px;
background: red;
 
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
 
/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

Wskazówka! Możesz uniknąć tego zgiełku, używając bibliotek takich jak -prefix-free. Jest to biblioteka JavaScript, która doda prefiks bieżącej przeglądarki do dowolnego kodu CSS. Sprawdź wiele takich bibliotek dostępnych w sieci.

Wniosek

Twórcy stron internetowych mogą stosować animacje i przekształcenia, aby przyciągnąć użytkowników do Twoich witryn. Możesz ich użyć do ulepszenia formularzy, powiadomień, grafiki tła, obrazów, wykresów, doodli, przycisków wezwania do działania i nie tylko. Po prostu użyj swojej wyobraźni i znajdź sposób, aby zadziwić swoich użytkowników. Pamiętaj, że nawet niewielka zmiana w Twojej witrynie może znacznie poprawić jej wygląd i zwiększyć jej wartość. Czy używałeś już animacji na swojej stronie internetowej? Podziel się swoimi przemyśleniami na temat używania animacji i przejść.