Animacje w CSS3 bez użycia JavaScript

Dostępne technologie cały czas się zmieniają. Jeszcze kilka lat temu ciężko było sobie wyobrazić dobrą animację bez użycia Flasha. Po pewnym czasie do tworzenia animacji zaczęto również wykorzystywać JavaScript. Obecnie od dłuższego czasu istnieje technologia umożliwiająca stworzenie animacji na stronie www nawet bez użycia skryptów JavaScript. Animacje w CSS3 są jak najbardziej możliwe.

Przeglądarki takie jak Firefox, Chrome czy Safari już od dawna obsługują możliwości animacji jakie daje CSS3. Internet Explorer od wydanej pod koniec 2012 roku wersji 10 również posiada zaimplementowaną obsługę animacji w CSS. Większość dostępnych obecnie przeglądarek na smartfony i tablety także nie ma problemu z obsługą animacji w CSS.

Zdefiniowanie animacji w CSS

Idea animacji w CSS3 jest dosyć prosta. Musimy zdefiniować wygląd elementu na początku (from / 0%) oraz na końcu (to / 100%) animacji. Opcjonalnie możemy zdefiniować wygląd w dowolnych punktach pośrednich np. w połowie animacji (50%).

/* Chrome, Safari, Opera 15.0 */
@-webkit-keyframes animacja {
    0%   {background-color: white;}
    50%  {background-color: black;}
    100% {background-color: white;}
}

/* Firefox 16.0, Chrome 43, MSIE 10 */
@keyframes animacja {
    0%   {background-color: white;}
    50%  {background-color: black;}
    100% {background-color: white;}
}

Przypisane animacji do elementu i określenie jej parametrów

W kolejnym kroku należy przypisać animację do konkretnego obiektu, oraz określić jej parametry takie jak czas trwania, ilość powtórzeń, funkcję upływu czasu:

#element {
    -webkit-animation-name: animacja;
    animation-name: animacja;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: 3;
    animation-iteration-count: 3;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

Poza tym możemy zdefiniować również opóźnienie rozpoczęcia animacji (animation-delay), kierunek animacji (animation-direction).

Przykład animacji używającej CSS


Przykład można pobrać z repozytorium na Githubie.

Podsumowanie

CSS3 daje nam ciekawe możliwości w zakresie tworzenia animacji, które mogą być dobrym urozmaiceniem strony. Należy jednak pamiętać, aby nie nadużywać animacji. To treść i dostępność oraz użyteczność strony powinny być najważniejsze.

Więcej na temat animacji z wykorzystaniem CSS można znaleźć na stronie W3C w oficjalnym szkicu standardu.

 

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

To prevent spam, URLs are not allowed in comments. All comments are moderated and subject to approval.
Aby zapobiec spamowi, adresy URL nie są dozwolone w komentarzach. Wszystkie komentarze są moderowane i podlegają zatwierdzeniu.