{"id":259087,"date":"2023-08-13T09:06:00","date_gmt":"2023-08-13T06:06:00","guid":{"rendered":"https:\/\/inform.click\/ozyw-swoje-strony-internetowe-za-pomoca-animacji-css-i-przejsc\/"},"modified":"2023-08-13T09:28:00","modified_gmt":"2023-08-13T06:28:00","slug":"ozyw-swoje-strony-internetowe-za-pomoca-animacji-css-i-przejsc","status":"publish","type":"post","link":"https:\/\/inform.click\/pl\/ozyw-swoje-strony-internetowe-za-pomoca-animacji-css-i-przejsc\/","title":{"rendered":"O\u017cyw swoje strony internetowe za pomoc\u0105 animacji CSS i przej\u015b\u0107"},"content":{"rendered":"

\n Projekty stron internetowych nieustannie ewoluuj\u0105. Od responsywnego projektu, pi\u0119knej typografii, idealnego schematu kodowania kolor\u00f3w, ilustracji, tw\u00f3rcy strony codziennie wymy\u015blaj\u0105 nowe pomys\u0142y i projekty.\n<\/p>\n

\n W dzisiejszych czasach u\u017cytkownicy maj\u0105 wysokie oczekiwania wobec interfejs\u00f3w u\u017cytkownika ze wzgl\u0119du na tak wysokiej jako\u015bci tre\u015bci dost\u0119pne w Internecie. Interfejsy stron internetowych ewoluuj\u0105, podobnie jak technologia, kt\u00f3ra za nimi stoi. Jednym z g\u0142\u00f3wnych komponent\u00f3w odpowiedzialnych za ulepszenie interfejsu strony jest CSS<\/strong>.\n<\/p>\n

\n CSS lub kaskadowe arkusze styl\u00f3w s\u0105 odpowiedzialne za uczynienie witryn bardziej interaktywnymi poprzez zdefiniowanie ich stylu, uk\u0142adu, projekt\u00f3w. Najnowszy standard CSS, czyli CSS3, wprowadzi\u0142 koncepcj\u0119 animacji<\/strong> i transformacji<\/strong>, kt\u00f3re poprawiaj\u0105 wra\u017cenia u\u017cytkownika, dodaj\u0105c dodatkow\u0105 g\u0142\u0119bi\u0119 do interfejsu u\u017cytkownika. Dzi\u0119ki animacjom i przej\u015bciom CSS mo\u017cesz opowiada\u0107 historie, tworzy\u0107 zachwycaj\u0105ce efekty i sprawi\u0107, \u017ce interakcja u\u017cytkownika z Twoj\u0105 witryn\u0105 b\u0119dzie bardziej efektywna i znacz\u0105ca.\n<\/p>\n

\n Animacja to po prostu symulacja ruchu, kt\u00f3ra jest tworzona przez wy\u015bwietlanie serii obiekt\u00f3w, takich jak obrazy, jeden po drugim. Z drugiej strony przej\u015bcie jest zasadniczo procesem, w kt\u00f3rym obiekt przechodzi z jednego stanu do drugiego. Ale kiedy m\u00f3wimy o animacjach internetowych, istniej\u0105 zasadniczo trzy typy \u2013 animacje CSS<\/strong> lub animacje klatek kluczowych, przej\u015bcia CSS<\/strong> i animacje JavaScript<\/strong>.\n<\/p>\n

\n Animacje CSS\n<\/p>\n

\n Aby tworzy\u0107 animacje w CSS, musimy zmieni\u0107 w\u0142a\u015bciwo\u015bci CSS elementu, takiego jak obraz lub tekst, na okre\u015blony czas. W\u0142a\u015bciwo\u015bci element\u00f3w mo\u017cemy zmienia\u0107 tyle razy, ile chcemy, a tak\u017ce mo\u017cemy ustawi\u0107 czas trwania animacji.\n<\/p>\n

\n Okre\u015blanie @klatek kluczowych
\n<\/h5>\n

\n Animacje CSS s\u0105 definiowane bitowo za pomoc\u0105 klatek kluczowych. Te klatki kluczowe s\u0105 po\u015brednimi punktami animacji. Wszystkie animacje CSS s\u0105 okre\u015blone w regule @keyframes. Te klatki kluczowe okre\u015blaj\u0105, co dzieje si\u0119 z elementem w okre\u015blonym momencie, tj.\n<\/p>\n

    \n
  • jakie w\u0142a\u015bciwo\u015bci si\u0119 zmieniaj\u0105\n <\/li>\n
  • kiedy element jest animowany\n <\/li>\n
  • jak element si\u0119 o\u017cywia\n <\/li>\n<\/ul>\n

    \n Mo\u017cesz zdefiniowa\u0107 w\u0142asn\u0105 klatk\u0119 kluczow\u0105 jako:\n<\/p>\n

    @keyframes animation_name\n{\nfrom{ property: value; }\nto{ property: value; }\n}<\/code><\/pre>\n
    \n  Tutaj \u201edo” i \u201ez” okre\u015blaj\u0105 pocz\u0105tek i koniec animacji. Mo\u017cemy r\u00f3wnie\u017c okre\u015bli\u0107 animacje dla po\u015brednich moment\u00f3w mi\u0119dzy pocz\u0105tkiem a ko\u0144cem w nast\u0119puj\u0105cy spos\u00f3b:\n<\/p>\n
    @keyframes name\n{\n0%{ property: value; }\n50%{ property: value; }\n100%{ property: value; }\n}<\/code><\/pre>\n
    \n  Tutaj 0% reprezentuje pocz\u0105tek animacji, 100% reprezentuje koniec animacji, a 50% oznacza zmian\u0119 pomi\u0119dzy pocz\u0105tkiem a ko\u0144cem. Ale jak powiedzie\u0107 przegl\u0105darce, jak d\u0142ugo ma trwa\u0107 animacja? Robimy to za pomoc\u0105 pewnych w\u0142a\u015bciwo\u015bci animacji<\/strong>. Te w\u0142a\u015bciwo\u015bci animacji s\u0105 powi\u0105zane z elementem, kt\u00f3ry ma by\u0107 animowany. Na przyk\u0142ad:\n<\/p>\n
    element_name\n{\nanimation_property: value;\nstyle_property: value;\n}<\/code><\/pre>\n
    \n  W tym przypadku elementem mo\u017ce by\u0107 dowolny znacznik HTML, taki jak div, span, img, p itp. oraz style_property<\/code>dowolna w\u0142a\u015bciwo\u015b\u0107 stylu CSS, taka jak kolor t\u0142a, szeroko\u015b\u0107, wysoko\u015b\u0107 itp. Przyjrzyjmy si\u0119 teraz bli\u017cej niekt\u00f3rym w\u0142a\u015bciwo\u015bciom animacji.\n<\/p>\n
      \n
    1. \n    @keyframes<\/strong>: Klatki kluczowe s\u0142u\u017c\u0105 do okre\u015blania kodu animacji, jak om\u00f3wiono powy\u017cej.\n  <\/li>\n
    2. \n    animacja-nazwa<\/strong>: Nazwa okre\u015blona przez @klatki kluczowe to nazwa animacji. Ta nazwa jest u\u017cywana do odwo\u0142ywania si\u0119 do klatek kluczowych z elementem, kt\u00f3ry ma by\u0107 animowany.\n  <\/li>\n
    3. \n    animacja-duration<\/strong>: S\u0142u\u017cy do okre\u015blenia czasu trwania animacji w sekundach lub milisekundach. Na przyk\u0142ad, je\u015bli ustawimy go na 5 sekund, animacja b\u0119dzie dzia\u0142a\u0107 tylko przez 5 sekund. Je\u015bli nie ustawimy tej w\u0142a\u015bciwo\u015bci, animacja w og\u00f3le si\u0119 nie uruchomi, poniewa\u017c jej domy\u015blna warto\u015b\u0107 to 0.\n  <\/li>\n
    4. \n    animacja-op\u00f3\u017anienie<\/strong>: Mo\u017cemy op\u00f3\u017ani\u0107 rozpocz\u0119cie animacji, okre\u015blaj\u0105c czas op\u00f3\u017anienia animacji. Na przyk\u0142ad, je\u015bli chcesz rozpocz\u0105\u0107 animacj\u0119 5 sekund po za\u0142adowaniu strony w przegl\u0105darce, po prostu ustaw op\u00f3\u017anienie animacji na 5s.\n  <\/li>\n
    5. \n    animacja-kierunek<\/strong>: Za pomoc\u0105 tej w\u0142a\u015bciwo\u015bci mo\u017cemy powiedzie\u0107 przegl\u0105darce, czy animacja porusza si\u0119 w odwrotnym kierunku, czy zmienia cykle. Na przyk\u0142ad, je\u015bli chcesz, aby animacja przebiega\u0142a od pocz\u0105tku do ko\u0144ca, ustaw warto\u015b\u0107 czasu trwania animacji na \u201enormalny”. Je\u015bli chcesz, aby dzia\u0142a\u0142 od ko\u0144ca do pocz\u0105tku, po prostu ustaw warto\u015b\u0107 na \u201eodwrotn\u0105”.\n  <\/li>\n
    6. \n    tryb-wype\u0142nienia animacji<\/strong>: Mo\u017cemy okre\u015bli\u0107 styl elementu, gdy animacja nie jest odtwarzana w tym trybie, tj. gdy animacja jest op\u00f3\u017aniona lub zako\u0144czona, jaki powinien by\u0107 styl elementu.\n  <\/li>\n
    7. \n    animacja-iteracja-liczba<\/strong>: Liczba odtworze\u0144 animacji jest reprezentowana przez t\u0119 w\u0142a\u015bciwo\u015b\u0107. Na przyk\u0142ad, je\u015bli chcesz odtworzy\u0107 animacj\u0119 raz, ustaw j\u0105 na 1 lub je\u015bli chcesz, aby animacja by\u0142a odtwarzana w niesko\u0144czono\u015b\u0107, po prostu ustaw \u201eniesko\u0144czono\u015b\u0107”.\n  <\/li>\n
    8. \n    animacja-timing-funkcja<\/strong>: Ta w\u0142a\u015bciwo\u015b\u0107 s\u0142u\u017cy do okre\u015blania krzywej pr\u0119dko\u015bci animacji, takiej jak liniowa, przyspieszenie lub zwolnienie.\n  <\/li>\n
    9. \n    Animacja<\/strong>: Jest to skr\u00f3cona w\u0142a\u015bciwo\u015b\u0107 s\u0142u\u017c\u0105ca do ustawiania wszystkich w\u0142a\u015bciwo\u015bci animacji.\n  <\/li>\n<\/ol>\n
      \n  Na przyk\u0142ad mo\u017cesz animowa\u0107 odbijaj\u0105cy si\u0119 obiekt za pomoc\u0105 nast\u0119puj\u0105cego fragmentu kodu. Zwr\u00f3\u0107 uwag\u0119, jak u\u017cyto tutaj skr\u00f3conej notacji animacji.\n<\/p>\n
      @keyframes slide {\n 0% {\n  left: 0;\n  top: 0;\n }\n 50% {\n  left: 244px;\n  top: 100px;\n }\n 100% {\n  left: 488px;\n  top: 0;\n }\n}\n \n.stage:hover .object {\n animation: slide 2s linear;    \/*shorthand animation property*\/\n}\n \n.object {\n background: #2db34a;\n border-radius: 50%;\n height: 50px;\n position: absolute;\n width: 50px;\n}<\/code><\/pre>\n
      \n  Przej\u015bcia
      \n<\/h3>\n
      \n  Przej\u015bcia CSS s\u0105 stosowane do w\u0142a\u015bciwo\u015bci element\u00f3w przez okre\u015blony czas w oparciu o okre\u015blone funkcje czasowe,<\/strong> czyli funkcje \u0142agodzenia. Przez funkcj\u0119 czasow\u0105 rozumiemy funkcj\u0119, kt\u00f3ra zmieni w\u0142a\u015bciwo\u015bci element\u00f3w z jednego stanu na inny, jak post\u0119p liniowy, przyspieszenie lub zwolnienie. By\u0107 mo\u017ce zauwa\u017cy\u0142e\u015b, \u017ce obraz przesuwa si\u0119 lub przekszta\u0142ca w inny obraz po najechaniu kursorem lub d\u017awi\u0119k jest odtwarzany po klikni\u0119ciu mysz\u0105. To wszystko s\u0105 efekty przej\u015bcia, kt\u00f3re mog\u0105 sprawi\u0107, \u017ce witryna b\u0119dzie interaktywna.\n<\/p>\n
      \n  Funkcje dynamiki<\/strong> s\u0105 wa\u017cne przy tworzeniu przej\u015b\u0107. Okre\u015blaj\u0105, w jaki spos\u00f3b zmieni\u0105 si\u0119 w\u0142a\u015bciwo\u015bci. Mog\u0105 r\u00f3wnie\u017c zmienia\u0107 szybko\u015b\u0107, z jak\u0105 zmienia si\u0119 warto\u015b\u0107 w\u0142a\u015bciwo\u015bci od punktu pocz\u0105tkowego do punktu ko\u0144cowego przej\u015bcia. Mo\u017cesz zastosowa\u0107 przej\u015bcia w nast\u0119puj\u0105cy spos\u00f3b:\n<\/p>\n
      element\n{\nstyle_property: value;\ntransition_property: value;\n}<\/code><\/pre>\n
      \n  Tutaj element okre\u015bla element HTML, kt\u00f3ry chcesz przekszta\u0142ci\u0107, np. div, H1, img itp. W\u0142a\u015bciwo\u015b\u0107_style to styl CSS zastosowany do tego elementu. Przyjrzyjmy si\u0119 teraz niekt\u00f3rym w\u0142a\u015bciwo\u015bciom przej\u015bcia<\/strong> :\n<\/p>\n