Kwi 27

Podstawy HTML i CSS – animacje w CSS

Podstawy HTML i CSS – animacje w CSS – jak zacząć przygodę z Frontendem?

 

Już jakiś czas temu, na Facebooku BedeProgramistka, wrzuciłam kod z Codepen’a pokazujący różne animacje w CSS. Dzisiaj na łamach bloga postanowiłam opublikować cały rozdział poświęcony właśnie animacjom w CSS. Jest to fragment z e-booka kurs Podstawy HTML i CSS.

Przyznam, że sama jestem fanką animacji. Właściwie to mam dwa marzenia związane z moim programowaniem. Pierwsze to być wymiataczem w JS i zaprzyjaźnić się z dziadem. Drugie marzenie, to robić zaawansowane animacje w CSS.

Ale przejdźmy do rzeczy. Miłej lektury! 🙂

P.S. Jeśli wolisz pobrać sobie ten tekst w bardziej czytelnej formie, na dole znajdziesz formularz, dzięki któremu pobierzesz ten tekst w pdfie 🙂


Animacje w CSS – transition

Dzięki animacjom w CSS możemy ożywić stronę. Za animację odpowiedzialna jest między innymi właściwość transition, która dodaje płynne przejścia między stanami zdefiniowanymi w CSS.

Transition składa się z kilku elementów:

    1. Transition-property – określa nam, które właściwości będą animowane. Jeśli chcielibyśmy zmienić kolor fontu powinniśmy wpisać transition-property: color; jeśli chcielibyśmy zmienić tło powinniśmy wpisać transition-property: background-color, jeśli chcielibyśmy zmienić obramowanie powinnyśmy wpisać transition-property: border;.
    2. Transition-duration – czyli czas trwania przejścia. Im dłuższy, tym bardziej subtelniejsza będzie animacja. Określamy go w jednostkach: s – sekundy, ms – milisekundy. Przykładowy zapis: transition-duration: 0.7s;
    3. Transition-timing-function – sposób, w jaki nasza animacja będzie zachodzić. Tutaj mamy kilka opcji:
      • linear – animacja posiada stałe tempo;
      • ease-in-out – animacja ma powolny start i koniec;
      • ease – animacja ma szybki start i zakończenie powolnym środkiem;
      • cubic-bezier(x, x, x, x) – animacja wg naszych parametrów – możesz sprawdzić tu działanie tej animacji – http://cubic-bezier.com/
    4. Transition-delay – jest to właściwość wpływająca na opóźnienie animacji. Podajemy go w jednostkach czasowych.

 

Animację zapisujemy w jednej linii:

transition: color 0.7s ease-in-out 0.7s;

 

Pełny zapis funkcji transition wygląda następująco:
transition: transition-property transition-duration transition-timing-function transition-delay


Przekształcanie w CSS – transform

Dzięki właściwości transform możemy przekształcać elementy na naszych stronach. Możemy przesuwać, skalować, obracać i pochylać. Pamiętajmy, że wszystkie transformacje zachodzą względem środka obiektu (transform origin znajduje się w miejscu współrzędnych 50%, 50%).

Przesuwanie – translate

Translate(x,y) służy przemieszczeniu elementu zgodnie z podanymi parametrami w nawiasie (x – dla osi X, poziomej oraz y – dla osi Y, pionowej).

Gdybyśmy chcieli przesunąć element o 100px w prawo i o 100 px w dół nasz zapis powinien wyglądać tak:

transform: translate(100px, 100px)

Wartości ujemne na osi X i Y przemieszczą element w lewo i do góry.

 

Obracanie – rotate

Gdybyśmy chcieli obrócić nasz element o 90 stopni zgodnie z ruchem wskazówek zegara nasz zapis powinien wyglądać tak:

transform: rotate(90deg)

 

Skalowanie – Scale

Skalowanie to nic innego, jak zwiększanie/zmniejszanie elementów.

Gdybyśmy chcieli powiększyć nasz element 1,5 razy nasz zapis powinien wyglądać tak:

transform: scale(1.5)

 

Gdybyśmy chcieli go pomniejszyć to musimy użyć wartości poniżej 1 np. 0.8.

Skalowanie może odbywać się tylko na wybranej osi (x lub y). Służą do tego właściwości:

transform: scaleX(wartość);

transform: scaleY(wartość);

 

Pochylanie – Scew

Pochylenie elementu może występować na dwóch osiach (x lub y). Wartości pochylenia podajemy w stopniach (deg).

transform: scewX(wartość);

transform: scewY(wartość);

Transform-origin

Tak, jak pisałam na początku, transformacje zachodzą względem środka obiektu. Jeśli chcemy zmienić animację, np. żeby zaczęła się od lewego górnego rogu, musimy wartościom na osi X i Y nadać odpowiednie właściwości.

Współrzędna na osi X może przyjmować właściwości: left, center, right, %.

Współrzędna na osi Y może przyjmować właściwości: top, center, bottom, %.

transform-origin: top left;


Tworzenie animacji – Keyframes

Tworzenie animacji w CSS następuje za pomocą Keyframes. Deklarację zaczynamy od znaku @ następnie wpisujemy keyframes i nazywamy
w dowolny sposób naszą animację:

@keyframes change-color {

}

 

W środku animacji pomiędzy nawiasami klamrowymi definiujemy co się będzie działo w wybranych przez nas przedziałach czasowych.

Te przedziały mogą być albo procentowe np. 0%, 50%, 100% albo możemy użyć słów from – to (od, do).

 

Przykład użycia from {} to {}:

@keyframes changecolor {

from {

background-color: #000000;

}

to {

background-color: #ff3b41;

}

}

 

Przykład użycia wartości procentowych:

@keyframes buttonPulse {

0% {

transform: scale(1);

}

50% {

transform: scale(1.3);

}

100% {

transform: scale(1);

}

}

Żeby animacja zadziałała wymaga dwóch właściwości:

  • animation-name – nazwa animacji
  • animation-duration – czasu trwania animacji

 

Oprócz tego animacje mogą przybierać jeszcze takie właściwości:

  • animation-timing-function – tempo wykonywania animacji (może przyjmować parametry: ease, linear, ease-in-out, cubic-bezier(x, x, x, x), steps(x), gdzie x to liczba kroków.
  • animation-delay – ustala opóźnienie, kiedy animacja ma się wykonać.
  • animation-direction – ustala kierunek animacji (może przyjmować parametry: alternate – animacja będzie powtarzać się w odwrotnym kierunku niż się rozpoczęła; rewerse – animacja rozpocznie się w miejscu, w którym się zakończyła, alternate-rewerse – animacja będzie powtarzana od końca i będzie powtarzania w miejscu, w którym się zakończyła, normal – animacja będzie rozpoczynać się od miejsca, w którym się rozpoczęła).
  • animation-iteration – ustala ilość powtórzeń animacji. Domyślną wartością jest liczba 1. Możemy określić ilość w liczbie, lub
    w wartości infinite (nieskończona liczba powtórzeń).
  • animation-fill-mode – określa, jakie cechy będzie miał animowany obiekt, po zakończeniu animacji.
  • animation-play-state – zatrzymywanie bądź wznowienie animacji (wartości to paused i running).

 

Animację możemy zapisać skrótowo, w jednej linii. Skrót tworzymy według wzorca:

animation: duration timing-function delay iteration-count direction fill-mode play-state name

 


Jeśli chcesz pobrać pdf Animacje w CSS, wypełnij poniższy formularz:

animacje w css

Dodaj komentarz

1 Komentarz do "Podstawy HTML i CSS – animacje w CSS"

avatar
  Subscribe  
najnowszy najstarszy oceniany
Powiadom o
Klakali
Gość

Mega!