Stronę tą wyświetlono już: 2784 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:
