Animacja w CSS – Transitions, czyli efekty przejścia w CSS

Kategoria wpisu Kurs CSS, Kursy Tagi: , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (1 głosów, średnia: 4,00 z 5)
Loading...

Witam w kolejnym moim wpisie poświęconym animacją na stronach internetowych. Jak każdy wie jest to temat dość ciekawy i można o nim jeszcze bardzo dużo napisać. Tym razem pokaże trochę inne efekty, wywoływane poprzez interakcję z użytkownikiem (hover). Będzie to na początku trochę powtórka, ale w dalszej części pojawią się nowe ciekawsze efekty.

Obecnie efekty przejścia (z ang. transitions) stanowią integralną całość z stronami interneowymi. Pod tą trochę dziwną nazwą kryje się właściwość dzięki, której możemy uzyskać efekt animacji dla wybranego elementu HTML. W dużym skrócie przekształcimy jedną wartość CSS w drugą (np. zmieniając kolor tła z niebieskiego w zielony), z tond też wzięła się polska nazwa tego efektu czyli efekt przejścia.

Pierwsza animacja

Najprostszym przykładem animacji jest (jeszcze bez efektu transitions):

Reguła CSS dla przykładu:

Jak widać tym razem kolor zmieniał się dopiero po najechaniu kursorem mamy więc do czynienia z :hover. Tak naprawdę na razie nie zrobiliśmy nic specjalnego. To przecież bardzo popularny efekt stosowany na stronach internetowych. Animacja nie jest jednak płynna.

Teraz spróbujemy to zmienić tak by animacja była bardziej płynna:

Reguła CSS dla przykładu:

Oba kody różni jedynie jeden element „transition-duration:3s;”. Oznacza, on że zmiana będzie wykonywała się 3 sekundy zamiast natychmiast. Efekt widać od razu.

Cechy właściwości

Efekt ten nie ogranicza sie jedynie do jednej funkcji:

  • transition-property: określa właściwości CSS, które będą brały udział w tworzeniu efektu czyli elementy HTML.
  • transition-duration: określa czas trwania danego efektu.
  • transition-timing-function: określa tempo w jakim efekt się wykonuje.
  • transition-delay: określa czas opóźnienia efektu, efekt nie zaczyna się więc wykonywać natychmiast.
  • transition: określa wszystkie powyższe właściwości CSS.
WłaściwośćChromeIE / EdgeFirefoxSafariOpera
transition26.0
4.0 -webkit-
10.016.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-delay26.0
4.0 -webkit-
10.016.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-duration26.0
4.0 -webkit-
10.016.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-property26.0
4.0 -webkit-
10.016.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-timing-function26.0
4.0 -webkit-
10.016.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

Z ciekawszych funkcji transition-timing-function może przyjmować kilka użytecznych właściwości.

ease – określa efekt przejścia z powolnym początkiem, następnie następuje przyspieszenie, po czym powoli kończy (właściwość ustawiona jest domyślnie)
linear – określa efekt przejścia z tą samą prędkością, od początku do końca
ease-in – określa efekt przejścia z powolnym startem
ease-out – określa efekt przejścia z powolnym końcem
ease-in-out – określa efekt przejścia z powolnym początkiem i końcem
cubic-bezier(n,n,n,n) – pozwala zdefiniować własne wartości w funkcji

Zmiana rozmiaru obiektu

Efekt płynnej animacji z transitions na przykładzie kuł:

300ms

1s

3s

Reguła CSS dla przykładu

W HTML

(Źródło przykładu)

Jak widać mamy tu 3 koła, nie powiększają się one jednak w tym samym czasie robią to w kolejności.
W tym wypadku każde koło powiększało się w innym momencie.

Jak inaczej zapisać:

Inaczej można zapisać ten wiersz jako:

Efekt Zoom Hover po najechaniu kursorem na zdjęcie, obrazek

„Wyścigi” kwadratów

Innym ciekawym przykładem zastosowania tej funkcji jest:

Ustawienia w CSS prezentują się następująco:

W HTML wygląda to na tomiast tak:

Poniższy kod można zapisać również inaczej:

Jako

5 prostych efektów na obrazkach z wykorzystaniem hover – CSS

Obrót wokół własnej osi

Obrót wokół własnej osi:

W CSS wygląda to następująco:

W HTML kod wygląda tak:

Przekżywienie

Przekrzywienie obiektu:

W CSS

W HTML

Jak widać stworzenie ciekawego efektu nie koniecznie musi być trudne. Więcej ciekawych efektów znajdziecie w źródłach.

Źródła:
http://webkod.pl/kurs-css/lekcje/dzial-1/efekt-przejscia-transition-css3
https://robots.thoughtbot.com/transitions-and-transforms
CSS Transitions, czyli efekty przejścia w CSS
http://www.w3schools.com/css/css3_transitions.asp

tagi:
zoom
efekt zooma
powiększenie obiektu z CSS
animacje bez jquery, javascript
czysty css
luźne tłumaczenie z języka angielskiego na polski
kurs html css
bez użycia jquery i javascript

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *