HTML5 & CSS3

Podstawy animacji w CSS3

Jako twórcy stron i aplikacji internetowych nie jesteśmy specjalistami od jednej technologii. Musimy poznać ich cały stos, co utrudnia proces uczenia się i zwiększa złożoność projektów. Spośród wszystkich narzędzi, zawsze na później odwlekałem naukę JavaScriptu. Choć dzięki podstawowej znajomości języka mogę wzbogacać interfejs, to jednak czasem lubię nacieszyć oko ciekawym efektem i zazdroszczę tym, którzy mieli czas i chęci, by opanować tę technologię. Teraz mam kolejny powód, by odłożyć dokumentację na później.

Pliki, które zostały wykorzystane w artykule znajdziecie w specjalnie przygotowanej paczce > Pobierz.

Właściwość animation i reguła @keyframes

Dzięki CSS3 możemy ożywić nasze strony bez znajomości programowania. Animacja polega na płynnej zmianie stylu elementu. Jeżeli potrafimy rozmieszczać elementy, potrafimy je także przemieszczać. Cztery podstawowe właściwości, które pozwolą nam zacząć przygodę z animacjami to:

  • animation-name  – nazwa reguły @keyframes , która ma być wykorzystana do animacji elementu,
  • animation-duration  – czas trwania animacji,
  • animation-timing-function  – określa, w jaki sposób animacja przechodzi przez klatki kluczowe,
  • animation-iteration-count  – liczba powtórzeń animacji.

Najważniejszym elementem jest reguła @keyframes . To w niej określamy nazwę animacji oraz zachowanie elementu. Najprostsza postać reguły pozwala określić stan początkowy oraz końcowy:

@keyframes nazwa {

    from {
    // Początek animacji
    }
    to {
    // Koniec animacji

    }

}

Rozmieszczenie klatek kluczowych można także określić procentowo:

@keyframes nazwa {

    0% {
    // Początek animacji
    }

    50% {
    // Połowa animacji
    }

    100% {
    // Koniec animacji
    }

}

Efekt paralaksy

Obiekty znajdujące się dalej od oglądającego wyglądają, jakby poruszały się wolniej. Efekt ten zastosujemy do trzech obrazów tła. Aby rozciągnąć tło na całą szerokość dokumentu, wykorzystamy elementy: html, body oraz pusty div. Podstawowa struktura dokumentu w HTML5 wygląda następująco:

<!DOCTYPE html>

<html>

<head>
    <title>Podstawy animacji CSS3</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div>
    </div>
</body>

</html>

Rozciągnięcie elementów na cały rozmiar dokumentu w pliku style.css:

html, body, div {
height: 100%;
margin: 0;
padding: 0;
}

Właściwość background pozwala na skalowanie obrazu, dzięki czemu możemy wykorzystać tylko jeden plik tła. Wymiary obrazu są podane w osobnym wierszu, w przeciwnym wypadku zapis skrócony nie zadziała w przeglądarce Firefox:

html {
background: #d7eef4 url('cloud.png') repeat-x left 72%;
background-size: 100px 48.5px;
}

body {
background: url('cloud.png') repeat-x left 80%;
background-size: 150px 72.75px;
}

div {
background: url('cloud.png') repeat-x left 90%;
}

Uzyskany w ten sposób efekt, to trzy rzędy nakładających się na siebie chmur, powtarzających się w poziomie. Czas trwania animacji powinien różnić się w zależności od położenia.

Efekt paralaksy

Dla elementu html będzie on największy, a dla div najmniejszy:

html {
animation: 10s infinite cloud1 linear;
}

body {
animation: 7.5s infinite cloud2 linear;
}

div {
animation: 5s infinite cloud3 linear;
}

Powyższe reguły animation określają kolejno: czas animacji, ilość powtórzeń (nieskończoność), nazwę oraz funkcję czasu. Liniowa (linear) funkcja czasu oznacza, że animacja nie zwalnia, ani nie przyspiesza.

Uwaga! Do reguły animation należy stosować przedrostki (-webkit dla Chrome i Safari, -moz dla Firefox, -o dla Opery). Jeżeli chcesz uruchomić animację w przeglądarce Firefox zamiast “animation” napisz “-moz-animation”. Jeżeli animacja ma działać we wszystkich przeglądarkach należy wymienić kolejno wszystkie reguły z przedrostkami, a na końcu regułę bez przedrostków. Aby artykuł nie był zbyt rozwlekły, będę pomijać przedrostki, należy jednak o nich pamiętać, ponieważ bez nich animacje nie będą działać (przynajmniej w chwili powstawania artykułu).

Animacja jest bardzo prosta i wymaga jedynie dwóch klatek kluczowych. W pierwszej tło jest wyrównane do lewej krawędzi ekranu, a w ostatniej jest przesunięte o szerokość obrazu tła. Ponieważ animacja powtarza się w nieskończoność, a tło powtarza się w poziomie, uzyskamy efekt ciągłego ruchu. Należy pamiętać o podaniu wysokości podczas definiowania pozycji. Teraz wystarczy nauczyć chmury zmieniać swoje położenie:

@keyframes cloud1 {
    from { background-position: 0 72%; }
    to { background-position: 100px 72%; }
}

@keyframes cloud2 {
    from { background-position: 0 80%; }
    to { background-position: 150px 80%; }
}

@keyframes cloud3 {
    from { background-position: 0 90%; }
    to { background-position: 200px 90%; }
}

Reguła @keyframes  również wymaga podawania przedrostków (np. @-webkit-keyframes) do poprawnego działania.

Przemieszczanie obiektu

W celu ożywienia sceny dodamy pierwszoplanowego bohatera. Będzie nim sowa, której wygląd zainspirowany został przez latające stworzenia w starej grze Creatures (polecam). Wprowadźmy bohatera na scenę:

<div>
    <img src=”owl.gif” />
</div>

Umieśćmy sowę na środku ekranu. Przy pozycjonowaniu należy uwzględnić rozmiary obrazu. Wymiary pliku to 160×160 pikseli. Aby obraz znalazł się na środku, należy przesunąć margines o 80 pikseli w górę i w lewo. Przy okazji zdefiniujemy podstawowe parametry animacji:

img {
    animation: 10s infinite owl;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -80px 0 0 -80px;
}

Początkowo sowa znajdować się będzie na środku ekranu, następnie zbliży się do jego prawej krawędzi, odleci od widza i wróci z lewej strony. Z punktu widzenia obserwatora, będzie się ona poruszać po brzegach trójkąta równobocznego i zmniejszać przy jednym z wierzchołków (oddalenie).

Animacja obiektu

Aby ruch był płynny wykorzystamy trzy wartości funkcji czasu:

  • ease – początkowe przyspieszenie oraz zwolnienie przy końcu animacji,
  • ease-in – ruch przyspieszony,
  • ease-out – ruch opóźniony.

Określając funkcję czasu, należy wziąć pod uwagę fakt, że ruch zaczyna się na środku ekranu. Kiedy sowa wróci w to samo miejsce nie powinna zwalniać, ani przyspieszać, a płynnie przelecieć od lewej do prawej krawędzi ekranu. Ustawimy więc wartości animation-timing-function  na ease-out  w pierwszej, oraz ease-in  w przedostatniej klatce kluczowej. Pozostałe klatki będą mieć ustawioną wartość ease . Położenie określimy używając wartości procentowych, aby uniezależnić się od rozmiarów okna przeglądarki:

@keyframes owl {

    0% {
    animation-timing-function: ease-out;
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    }

    15% {
    animation-timing-function: ease;
    left: 75%;
    top: 50%;
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    }

    50% {
    animation-timing-function: ease;
    left: 50%;
    top: 25%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    }

    85% {
    animation-timing-function: ease-in;
    left: 25%;
    top: 50%;
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    }

    100% {
    left: 50%;
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    }

}

Wsparcie przeglądarek

Obecnie animacje nie działają w przeglądarce Internet Explorer, a w pozostałych wymagają podawania przedrostków przed właściwościami. Wykorzystując animacje w projektach wystarczy zwrócić uwagę na początkowy stan animowanych obiektów. W starszych przeglądarkach obrazy wyświetlą się prawidłowo, a sowa latać będzie na środku ekranu, ponieważ animacje zostaną zignorowane.

Podsumowanie

Ożywianie obiektów na stronach internetowych to świetna zabawa, pamiętajmy jednak, aby nie nadużywać animacji w projektach. Niech treść, dostępność i użyteczność zawsze będą najważniejsze. Zachęcam do eksperymentowania z wartościami animation-timing-function i położeniem elementów oraz tworzenia własnych scen. Nie zapomnijcie podzielić się efektami w komentarzach.

Zobacz DEMO >> Podstawy animacji w CSS3

Grafika: freedigitalphotos.net

komentarzy 9

  • Awatar
    Artur Pięciak

    24 października 2012 18:02

    Fajna sprawa, w wolnej chwili muszę to przetestować :) W materiale brakuje przykładów efektu zastosowania danego ciągu kodu.. ale i tak duży plus! Pozdro!

    Odpowiedz
  • Awatar
    VoonArt

    25 października 2012 08:56

    Przydało by sie demko.

    Odpowiedz
  • Awatar
    Michał

    16 maja 2013 22:28

    Moje pytanie czy można zrobić tak by np. Sowa była jako przycisk button i gdy sią ją naciśnie, poniżej jej pojawi się Okienko do logowania. A reszta animacji się zatrzyma ?
    Mógł by mi ktoś w tym podpowiedzieć ?

    Odpowiedz
    • Awatar
      Marcin

      3 grudnia 2013 18:53

      Witam:)
      Podpisuję się pod pytaniem Michała
      Czy da się zrobić tak aby po najechaniu na sowę zatrzymała się i dało się w nią kliknąć żeby nas np przeniosła na inna stronę???
      Pozdrawiam
      Marcin

      Odpowiedz
      • Awatar
        Dość

        22 lutego 2014 00:40

        Przypadkiem wpadlem na ten przykład i wydaje mi sie, że jeśli to wciaz aktualne :) w co wątpię to w części :hover pewnie można wstawić zatrzymanie animacji :) a link przypisac poprostu do obrazka ;)

        Odpowiedz
  • Awatar
    Piotr

    31 marca 2014 18:18

    witam, niestety kod nie wyswietla sie poprawnie

    Odpowiedz
  • Awatar
    asdsad

    1 kwietnia 2016 12:30

    fajne podoami sie

    Odpowiedz

Zostaw odpowiedź