Animacje CSS
Stronę tą wyświetlono już: 1810 razy
CSS rozwinął się do tego stopnia, że można w nim tworzyć animacje przejścia jednego stylu w drugi. Jest to możliwe dzięki zastosowaniu trzech nowych atrybutów:
- transition-property - określa, dla których atrybutów danego elementu strony będzie tworzona animacja przejścia;
- trensmision-duration - określa czas trwania animacji przejścia;
- transition-timing-function - funkcja sterująca zmianą prędkości przejścia po czasie, dostępne są następujące opcje:
- ease (wartość domyślna) określa animację z wolnym startem, przyśpieszeniem i zwolnieniem animacji na końcu (można zastąpić za pomocą cubic-bezier(0.25,0.1,0.25,1));
- linear określa stałą prędkość animacji (można zastąpić za pomocą cubic-bezier(0,0,1,1));
- ease-in określa animację z wolnym startem i późniejszym jej przyspieszeniem (odpowiednik cubic-bezier(0.42,0,1,1))
- ease-out określa animację z powolnym jej zakończeniem (odpowiednik cubic-bezier(0,0,0.58,1));
- ease-in-out określa animację z powolnym startem i końcem (odpowiednik cubic-bezier(0.42,0,0.58,1));
- step-start odpowiednik steps(1, start);
- step-end odpowiednik steps(1, end);
- steps(int,start|end) - określa funkcję kroków animacji za pomocą dwóch parametrów: pierwszy - określa liczbę interwałów w funkcji; drugi - (opcjonalny) może przyjmować wartość start lub end (domyślny, gdy parametr zostanie pominięty) i określa punkt animacji, do którego ta powinna dążyć;
- cubic-bezier(n,n,n,n) - tworzy własną funkcję prędkości przejścia animacji. Wartości n mogą się wahać od 0 do 1;
Oto prosty przykład zastosowania dla styli filter i border-radius elementu img:
- <style>
- img.gray
- {
- -webkit-filter: grayscale(100%);
- filter: grayscale(100%);
- transition-property: filter, border-radius;
- transition-duration: 1s;
- transition-timing-function: linear;
- display:block;
- margin: auto;
- width: 50%;
- height: 50%;
- border: 1px solid #aaaaaa;
- border-radius: 5px;
- padding: 5px;
- box-shadow: 0 0 10px 10px rgba(200, 200, 200, 0.5);
- }
- img.gray:hover
- {
- -webkit-filter: grayscale(0%);
- filter: grayscale(0%);
- border-radius: 50%;
- }
- </style>
- <img class="gray" src="rysunki/Panorama.jpg" alt="panorama"/>
Efekt działania powyższego kodu:

Propozycje książek

Tytuł:
CSS od podszewki
Autor:
Keith J. Grant

Tytuł:
Tablice informatyczne. HTML 5. Wydanie II
Autor:
Radosław Sokół

Tytuł:
HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End Developera
Autor:
Jon Duckett

Tytuł:
CSS bez tajemnic. 47 sekretów kreatywnego projektanta
Autor:
Lea Verou

Tytuł:
HTML5. Tworzenie gier z wykorzystaniem CSS i JavaScript
Autor:
Karl Bunyan