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.

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:

Po zakończeniu animacji obiekt wróci do swojego pierwotnego koloru. Animacja nie zostanie powtórzona – jest to bowiem jedno razowe zdarzenie.

Uwaga – jeśli przegapiłeś efekt odśwież stronę. Skrypt wykonuję się tylko kilka sekund.

Teraz jak to wygląda od strony kodu CSS:

div.cont {
    width: 150px;
    height: 150px;
    background-color: blue;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 10s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    from {background-color: blue;}
    to {background-color: green;}
}

W HTML zapisujemy za to kod.

<div class="cont"></div>

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;

Poniżej nieco dłuższa animacja.

div.second {
    width: 100px;
    height: 100px;
    background-color: blue;
    -webkit-animation-name: seconds; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: seconds;
    animation-duration: 4s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes seconds {
    0%   {background-color: blue;}
    25%  {background-color: green;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* Standard syntax */
@keyframes seconds {
    0%   {background-color: blue;}
    25%  {background-color: green;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

W HTML

<div clsaa="second"></div>

Prosty ruch elementu DIV

Pora wprowadzić teraz nowy rodzaj animacji. W tym wypadku będzie to ruch. I nie będzie to zwykły ruch tylko powtarzalny. Jest to Poniżej wynikiem zastosowania infinite przykład:

div.move {
    width: 100px;
    height: 100px;
    background: blue;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 0px;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 0px;}
}

Podobnie jak wcześniej w HTML zapisujemy

<div class="move"></div>

Ruch i zmiana szerokości obiektu

div.inny {
    width: 100px;
    height: 100px;
    background: blue;
    position: relative;
    -webkit-animation: szerokosc 5s infinite; /* Chrome, Safari, Opera */ 
    animation: szerokosc 5s infinite;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes szerokosc {
    0%   {top: 0px; background: blue; width: 100px;}
    100% {top: 200px; background: green; width: 300px;}
}

/* Standard syntax */
@keyframes szerokosc {
    0%   {top: 0px; background: blue; width: 100px;}
    100% {top: 200px; background: green; width: 300px;}
}

Inne ciekawe animacje

Przesuwanie na boki

See the Pen
Move – animation by Aura (@Julka85)
on CodePen.

Zmieniający rozmiar obiekt

See the Pen
Size by Aura (@Julka85)
on CodePen.

Zobacz ciąg dalszy:
Animacje z efektem na :hover – czyli po najechaniu myszką

Źródło: http://www.w3schools.com/css/css3_animations.asp