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

Witam w kolejnym wpisie poświęconym tematyce animacji na stronach internetowych. Temat ten jest dość szeroki więc więc na pewno nie dam rady tutaj omówić wszystkich jego aspektów.

Dlatego tym razem zdecydowałam się na 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.

O animacji z właściwością CSS transitions

Obecnie efekty przejścia (z ang. transitions) stanowią integralną całość z wieloma stronami internetowymi. 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), stąd też wzięła się polska nazwa tego efektu czyli efekt przejścia.

Pierwsza animacja

Najprostszym przykładem animacji jest (jeszcze bez efektu / właściwości transitions):

See the Pen hover animation by Aura (@Julka85) on CodePen.

Kod CSS

.exemple {
  width:40%;
  height:80px;
  background-color:green;
  padding:12px;
  font-size:1.2em;
  border:3px solid #000;
}

.exemple:hover {
  width:80%;
  background-color:blue;
}

Jak widać kolor jak i rozmiar obiektu zmieniają się dopiero po najechaniu kursorem. Oznacza to, że mamy do czynienia z typu :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 wprowadzimy drobne zmiany w naszym kodzie. Głównym celem zmiany będzie dodanie płynności do animacji.

See the Pen hover animation by Aura (@Julka85) on CodePen.

Jedyną rzeczą jaką zmieniłam a właściwie dodałam w drugim przykładzie jest dodanie właściwości „transition-duration:3s;„. Powoduje ona, że zmiana będzie wykonywała natychmiastowo a w ciągu 3 sekund. Różnicą widać od razu.

.example {
  width:40%;
  height:80px;
  background-color:green;
  padding:12px;
  font-size:1.2em;
  border:3px solid #000;
transition-duration:3s;
}

.example:hover {
  width:80%;
  background-color:blue;
}

Cechy właściwości

Efekt animacji można z pomocą jednej właściwości (w formie skróconej), jednak by lepiej ją zrozumieć warto poznać inne właściwości, które wpływają na określone funkcje:

• 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ść	Chrome	IE / Edge	Firefox	Safari	Opera
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-delay	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-duration	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-timing-function	26.0 4.0 -webkit-	10.0	16.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 po najechaniu kursorem myszy

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

See the Pen Untitled by Aura (@Julka85) on CodePen.

(Ź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ć:

transition: all 3s;

Inaczej można zapisać ten wiersz jako:

transition-duration: 3s;

Warto przeczytać -> Jak utworzyć efekt Zoom (przybliżenia, oddalenia) na stronie

„Wyścigi” kwadratów – przesuwanie elementów

Innym ciekawym przykładem zastosowania tej funkcji jest:

See the Pen move on hover by Aura (@Julka85) on CodePen.

Jak zapewne już zauważyliście każdy z powyższych kwadratów porusza się w nieco inny sposób. Spowodowane jest to oczywiście ustawieniami właściwości transition. Przykładowo:

transition: all 3s ease-in-out;

Po rozbiciu na części / konkretne właściwości CSS zapis ten może wyglądać tak:

transition-timing-function: ease-in-out;

transition-duration: 3s;

Inne ciekawe przykłady animacji

Zmiana wyglądu i zachowania

Obrót wokół własnej osi:

See the Pen rotate on hover by Aura (@Julka85) on CodePen.

Przekżywienie

Przekrzywienie obiektu:

See the Pen skewX by Aura (@Julka85) on CodePen.

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
• https://blog.marcoos.com/2009/10/21/css-transitions-czyli-efekty-przejscia-w-css/
• http://www.w3schools.com/css/css3_transitions.asp

dodatkowe tagi:

• zoom czyli powiększenie obiektu z pomocą CSS
• efekt zooma
• animacje bez jquery, javascript
• czysty kod css bez użycia skryptów jquery i javascript
• luźne tłumaczenie z języka angielskiego na polski
• kurs html css