CSS3 transition – co to jest i jak z tego korzystać

transition-title.jpg

CSS3 transition to niedawno wprowadzona możliwość tworzenia płynnego, zmieniającego się w funkcji czasu, parametru zdefiniowanego w CSS. Najprościej będzie to wytłumaczyć na przykładzie. Weźmy pod uwagę nawigacje dowolnej strony, często po najechaniu na dany link zobaczymy np. zmianę koloru tła. Tradycyjnie odbywało się to natychmiastowo, jednak za pomocą Transitions możemy sprawić, aby zmiana ta odbywała się stopniowo. Pozwala to nam na w miarę proste ożywienie naszej strony, bez wykorzystania bibliotek typu jQuery.

W tym miejscu od razu chciałbym przestrzec przed nadmiernym wykorzystaniem tej funkcji, najczęściej strony pełnią funkcje informacyjną i nie jest wymagane, aby cały projekt nam skakał, albo nie daj boże grał.

Jak wygląda funkcja CSS3 transition?

transition : <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

Jest to skrócona wersja tej funkcji, podobnie jak w przypadku border, możemy kolejno definiować dane parametry np.: transition-property, transition-duration, transition-timing-function oraz transition-delay.

Opiszmy teraz za co odpowiadają dane funkcje:

  • transition-property – odpowiada za to jaką funkcje mamy objąć transition, czyli jeżeli chcemy aby z czasem zmienił się nam kolor tła, to ustawiamy – background-color. Domyślnym parametrem jest all, czyli CSS transition będzie działa na wszystkie obsługiwane funkcję. Oto lista obsługiwanych parametrów.
  • transition-duration – czas trwania przejścia.
  • transition-timing-function – funkcja czasu, zaprezentowana w formie krzywej beziera. Istnieje 5 zdefiniowanych funkcji gotowych do wykorzystania pod nazwami: ease, linear, ease-in, ease-out, ease-in-out. Możemy także zdefiniować własną funkcję przy pomocy cubic-bezier. Pomocna w tym przypadku może okazać się strona http://cssglue.com/cubic.
  • transition-delay możliwość zdefiniowania opóźnienia całej przemiany.

Wsparcie dla przeglądarek

CSS transtions obsługiwane jest obecnie przez Chrome, Safari, Opera 10.5+, Firefox 4+. Z zapowiedzi wynika, iż wersja 10 IE również ma posiadać ich obsługę, czy w pełnym stopni? Trudno powiedzieć. Oczywiście należy pamiętać o dodawaniu prefilksów: -o-, -moz-, -webkit-, oraz -ms- właśnie ze względu na przyszłość.

Przykłady stosowania

Zaczniemy od bardzo prostego przykładu, czyli płynne wysunięcie linka na którego najechaliśmy myszką. Przykładowo posiadamy typową strukturę listy linków dla nawigacji:

<ul class="move-links">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>

Teraz jej style:

ul.move-links li {list-style: square;}

ul.move-links li a {
text-decoration: none;
font-size: 14px;
color:#444;
margin:0;
-moz-transition: margin 0.3s ease-out;
-webkit-transition: margin 0.3s ease-out;
-o-transition: margin 0.3s ease-out;
-ms-transition: margin 0.3s ease-out;
transition: margin 0.3s ease-out;
}

ul.move-links li a:hover {font-weight: bold;margin-left:10px; }

Interesująca nas część kodu CSS to style dla naszego linka. Widzimy tam funkcje odpowiedzialne za płynne przesunięcie. Jak widzimy zmiennym dla nas parametrem jest margin, zmiana ma trwać 0.3s i odbywać się w funkcji czasu zdefiniowanej jako ease-out. Teraz przyglądając się stylom dla :hover widzimy zmianę dla lewego marginesu, oznacza to dla nas, że zadziała zdefiniowana wcześniej transition, która dokona zmian w określonym przez nas czasie. Podgląd tego kodu można zobaczyć w pierwszym przykładzie z demonstracyjnej strony.

Wywoływanie transtion nie musi się odbywać tylko poprzez :hover, można także skorzystać z innych pseudo klas:

  • :active
  • :checked
  • :focus
  • media queries

Można także skorzystać z możliwości JavaScript.

W drugim przykładzie pokażę jak wykorzystać pseudo klasę :active oraz jak ustawić różne czasy dla poszczególnych elementów. Kod HTML to zwykły div o nadanej klasie „box”. A styl CSS wygląda tak:

.box{
width:200px;
height: 200px;
background:#eee;
border: 1px solid #ccc;
-webkit-transition-property:
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius,
border-bottom-left-radius;
-webkit-transition-duration: 0.5s, 0.5s, 2s, 2s;
-webkit-transition-timing-function: ease-in;
}

.box:active {
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-bottomleft: 40px;
-webkit-border-radius: 20px 20px 40px 40px;
border-radius: 20px 20px 60px 60px;
}

Widzimy że dla box stworzyliśmy transition, która ma działać na kolejnych zaokrągleniach rogów obramowania. Dzięki wypisaniu kolejnych rogów możemy także dla każdego z osobna ustawić inny czas przejścia. I tak w naszym przypadku górne zaokrąglenie rogów będzie się zmieniać przez 0.5s, a dolne przez 2s.

Dalej definiujemy .box:active, czyli co się wydarzy po tym jak klikniemy i przytrzymamy przycisk na klasie box, czyli w naszym przypadku zmieni się zaokrąglenie rogów. Efekt widoczny jest w drugim przykładzie na stronie demonstracyjnej.

Narzędzia przydatne przy korzystaniu z CSS3 transition

  • Ceaser - CSS easing animation tool – narzędzie do generowania funkcji czasu dla transition, ma wiele predefiniowanych krzywych, demo do natychmiastowego testowania efektów oraz generuje bardzo dobry kod gotowy do wklejenia.
  • CSS cubic-bezier Builder – bardzo duży wygodny w obsłudze wykres. Wadą jednak jest słaby kod nie przystosowany do większej liczby przeglądarek, oraz brak szybkiej prezentacji naszych ustawień.
  • http://cubic-bezier.com/ - również wygodne w obsłudze narzędzie z ciekawą prezentacją efektów pracy w formie porównania do standardowych funkcji. Nie generuje nam jednak całościowego kodu transition tylko samą krzywą beziera.

Czy wart korzystać z CSS3 transition

Moim zdaniem tak. Jak pokazałem wyżej w bardzo prosty i najczęściej nieinwazyjny sposób możemy ożywić naszą stronę. Należy pamiętać tylko o osobach ze starszymi przeglądarkami, aby brak danego efektu nie wpłynął na użyteczność serwisu. Przestrzegam także przed nadmiernym wykorzystaniem tych funkcji przesadne jej używanie na stronie, może ostatecznie zdenerwować użytkownika.

DyskusjaKomentarze: 1

  • Wojciech 29 kwiecień 2013 22:21
    Dziękuję bardzo za tą przydatną notkę, na pewno mi się przyda :)

Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]

Copyright © 2018 Webnote

Projekt i wykonanie: Xelos

Dodaj link