Zapewne każdy z was widział różne animacje na stronach internetowych. Obracające się czy wjeżdżające zdjęcia. Większość z tych animacji stworzona jest za pomocą JavaScript (lub z jego biblioteką jQuery).
Nie oznacza to jednak, że trzeba poznać ten skrypt by wykonać jakąś dynamiczną zmianę na stronie.
Co znajdziesz w tym wpisie
Animacje z CSS3
Z pomocą nam tutaj przychodzi CSS3. Być może nie stworzymy tak ciekawych efektów, ale z pewnością możemy nieco ożywić naszą witrynę.
Zmiana koloru tła div
Na początku zacznę od dość prostej animacji polegającej na zmianie koloru tła przykładowego obiektu. W tym przykładzie użyję div:
See the Pen
color change by Aura (@Julka85)
on CodePen.0
Po zakończeniu animacji obiekt wróci do swojego pierwotnego koloru. Animacja nie zostanie powtórzona – jest to bowiem jedno razowe zdarzenie.
Skąd CSS wie, który obiekt ma animować?
Istotny jest element:
animation-name: example;
Jest to nadanie nazwy konkretnemu elementowi. Nazwa musi być więc unikalna, chyba że planujemy dać efekt, również na inne elementy.
Gdzie ustawiamy czas animacji?
animation-duration: czas animacji;
W ruch z kolei wprawia go kod:
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 0px;}
}Jak zapewne zauważyliście mamy tak prawdę 2 razy powtórzony kod animacji w:
- @-webkit-keyframes
- @keyframes
Różnica pomiędzy tymi 2 elementami polega na tym, że pierwszy z nich posiada przedrostek -webkit- . Przedrostki tego typu używa się ze względu na niektóre przeglądarki internetowe np.
- Safari,
- Chromium,
- Gecko
które nie koniecznie bez niego umiały by obsłużyć zapytanie.
Poniżej nieco dłuższa animacja.
See the Pen
second by Aura (@Julka85)
on CodePen.0
Prosty ruch elementu DIV w nieskończoność
Pora wprowadzić teraz nowy rodzaj animacji. W tym wypadku będzie to ciągły ruch. Czyli taki, który będzie się powtarzać w nieskończoność. Jest to wynikiem zastosowania infinite przykład:
See the Pen
move animation by Aura (@Julka85)
on CodePen.0
Użycie tej zmiennej wygląda następująco:
animation: mymove 5s infinite;
Ruch i zmiana szerokości obiektu
See the Pen
Untitled by Aura (@Julka85)
on CodePen.0
Inne ciekawe animacje
Przesuwanie na boki
Animacja ta działa dzięki:
@-webkit-keyframes moveanimation {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 250px; top: 0px;}
50% {background: blue; left: 250px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}Zmieniający rozmiar obiekt
Zobacz ciąg dalszy:
Animacje z efektem na :hover – czyli po najechaniu myszką
Źródło: http://www.w3schools.com/css/css3_animations.asp
