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ę.
Co znajdziesz w tym wpisie
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