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

Czas czytania: 3 minut

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:

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

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

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:

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

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

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

.wrap {
  margin: 50px;
}

.container {
  display: inline-block;
  width: 150px;
}

h5 {
  color: lightgray;
  font-size: 20px;
  font-weight: 200;
  padding: 20px;
  text-align: center;
}

.box {
  border-radius: 50%;
  height: 40px;
  margin: 50px auto;
  width: 40px;
  }
  .wrap:hover .box  {
    transform: scale(2);
  }


.box1 {
  background: #60D4C8;
  transition: all 300ms;
}

.box2 {
  background: #46BAAF;
  transition: all 1s;
}

.box3 {
  background: #3EA69B;
  transition: all 3s;
}

W HTML

300ms
1s
3s

(Ź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;

https://www.aurainweb.pl/2016/07/zoom-czyli-powiekszenie-obrazka/

„Wyścigi” kwadratów

Innym ciekawym przykładem zastosowania tej funkcji jest:

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


.figure, .figure0, .figure1, .figure2, .figure3, .figure4, .figure5 {
  height: 30px;
  width: 30px;
  margin: 10px;
  }
  .przyklad4:hover .figure, .przyklad4:hover .figure0, .przyklad4:hover .figure1, .przyklad4:hover .figure2, .przyklad4:hover .figure3, .przyklad4:hover .figure4, .przyklad4:hover .figure5 {
    transform: translateX(200px);
  }


.figure0 {
  background: PaleTurquoise;
  transition: all 1.5s linear;
} 

.figure1 {
  background: cadetblue;
  transition: all 1.5s ease;
}

.figure2 {
  background: wheat;
  transition: all 1.5s ease-in;
}

.figure3 {
  background: beige;
  transition: all 1.5s ease-out;
}

.figure4 {
  background: blueviolet;
  transition: all 1.5s ease-in-out;
}

.figure5 {
  background: purple;
  transition: all 1.5s cubic-bezier(0,1,.98,0); 
}

W HTML wygląda to na tomiast tak:

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

transition: all 3s ease-in-out;

Jako

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

https://www.aurainweb.pl/2017/08/5-prostych-efektow-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:

.przyklad5 {
  background: purple;
  height: 100px;
  margin: 100px;
  transition: all 3s;
  transition-timing: ease-in-out;
  width: 100px;
}
  
.przyklad5:hover {
    transform: rotate(1080deg);
  }

W HTML kod wygląda tak:

Przekżywienie

Przekrzywienie obiektu:

W CSS

.przyklad6 {
  background: Khaki;
  border-radius: 5px;
  height: 150px;
  margin: 100px    ;
  transition: transform 1s;
  width: 150px;
  }
.przyklad6:hover {
    transform: skewX(-20deg);
  }

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
https://blog.marcoos.com/2009/10/21/css-transitions-czyli-efekty-przejscia-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