Nowa specyfikacja popularnych kaskadowych arkuszy stylów ma ogromne możliwości. Zaczynając drobiazgów, typu wyrównanie, kolor – kończąc na prostych animacjach, do których do tej pory niezbędna była JavaScript lub w najgorszym wypadku Flash.

Chciałbym zaprezentować, jak w najprostszy sposób wykonać drobną animację (chociaż to może za dużo powiedziane) na przykładzie ikon, które widnieją u mnie w prawej górnej części strony. Zamiast zwykłych statycznych obrazków, dodałem efekt :hover, powodujący obrócenie ikon o 90 stopni po najechaniu na nie.

Jak wygląda kod takiego prostego efektu? Jest on banalnie prosty, a możliwości dopasowania go do własnych wymagań, czy zastosowanie go przy innych elementach – nieograniczone.

Co będzie potrzebne na początek? Przede wszystkim musimy zdefiniować miejsce, w którym znajdować się będą nasze ikony. Div nazwałem jako skrót od Social Media.

[html]
<div id="sm">

<a href="https://plus.google.com/106005511956641138588/posts">
<img src="https://dailyweb.pl/googleplus.png">
</a>

<a href="https://www.facebook.com/lubik.info">
<img src="https://dailyweb.pl/facebook.png">
</a>

<a href="https://twitter.com/#!/zeppastian">
<img src="https://dailyweb.pl/twitter.png">
</a>

<a href="https://feeds.feedburner.com/LubikInfo">
<img src="https://dailyweb.pl/rss.png">
</a>
</div>
[/html]

Zostaje nam teraz przygotowanie styli, w których umieścimy informacje co do rozmieszczenia, marginesów i dodamy efekty animacji. O ile pierwsze elementy znacie doskonale, to skupimy się bezpośrednio na poleceniach powodujących obrót ikon.

[css]
#sm img{
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
[/css]

Co oznaczają powyższe deklarację? Otóż za ich pomocą definiujemy efekt animacji dla różnych silników przeglądarek. Dla przykładu -o-transition, to silnik przeglądarki Opera. By uprościć interpretację, każdy powyższy wiersz można zapisać tak:

[css]
transition-property: all;
transition-duration: 0.2s; /* czas trwania animacji */
transition-timing-function: ease-in-out; /* tempo animacji */

/* znacznie wygodniej zapisać całość w postaci skróconej: */
transition: all 0.2s ease-in-out
[/css]

Oczywiście czas animacji czy też jej tempo można dowolnie zmieniać by uzyskać interesujący nas efekt. Zainteresowanych drobiazgami odsyłam do bloga Marcoos’a, który świetnie omówił każdy element z osobna.
Tym samym zostaje nam dodanie efektu po najechaniu na wybrane ikony, czyli :hover:

[css]
#sm img:hover{
-moz-transform: rotate(90deg); /* obrót o 90 stopni */
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
[/css]

Powyższa deklaracja wydaje się być jasna. Każdy element po najechaniu na niego kursorem zostanie obrócony o 90 stopni. Zmieniając tą wartość na np. 360 stopni, zwiększając czas trwania (0.2) i tempo animacji (ease-in-out) uzyskamy zupełnie inny efekt.
Każda aktualna przeglądarka nie powinna mieć już najmniejszego problemu w obsłudze powyższych selektorów, w związku z czym możemy dodać atrakcyjny efekt do własnej witryny nie bojąć się o kompatybilność przeglądarek naszych użytkowników. Mam nadzieje, że po krótce udało się przybliżyć te najprostsze animacje w CSS3 i sposób ich wykorzystania.

TEMATY:
Najświeższe artykuły