Prosta animacja z użyciem CSS3

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.

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.

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.

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.

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