kursy tutoriale
|

Prosta animacja z użyciem CSS3

przezAurelia Sypniewska
Czas czytania: 2 minut

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.

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