Nowoczesne strony muszą być nie tylko ładne, ale też przyjazne dla użytkownika. Na przykład, po najechaniu myszką na przycisk następuje zmiana koloru pozwalająca przykuć uwagę użytkownika. Istnieje kilka sposobów na osiągnięcie tego efektu. Zacznijmy od najprostszego — od przejść CSS.
Jest jednak pewien niuans. Nie wystarczy, że deweloper zrozumie, jaki efekt tworzy przejście CSS. Musi jeszcze zrozumieć mechanikę tego procesu i jego ograniczenia.
Przejścia CSS pozwalają animować zmianę wartości właściwości, ustawiać czas i kontrolować szybkość tego przejścia. Zmiana właściwości następuje po wystąpieniu określonego zdarzenia, na przykład :hover.
Przejście zawsze ma tylko dwa stany: 1) początkową i 2) końcową wartość właściwości i może zmieniać tę wartość A > B i B > A przez określony czas. W przypadku animacji z więcej niż 2 stanami, należy użyć animacji CSS.
Poniższe cztery właściwości kontrolują różne parametry przejścia.
transition-property: <właściwość>
transition-duration: <czas>
transition-timing-function: <funkcja przydziału czasu>
transition-delay: <opóźnienie>
Właściwość transition-property określa właściwości, do których zostanie zastosowany efekt przejścia. Wartością może być pojedyncza właściwość lub lista właściwości oddzielonych przecinkami.
Domyślną wartością jest all, czyli animowanie wszystkich możliwych właściwości.
.box {
background-color: teal;
transition-property: background-color;
}
.box:hover {
background-color: orange;
}
Jeśli musisz określić więcej niż jedną właściwość, oddziel je przecinkami.
.box {
color: orange;
background-color: teal;
transition-property: color, background-color;
}
.box:hover {
background-color: orange;
color: white;
}
Lista transition-property:
Alfabetyczna lista najważniejszych funkcji transform
matrix() jest rzadko używane ręcznie, ale można dzięki niemu zrobić bardzo efektowne animacje, bo pozwala w jednej funkcji połączyć: scale rotate skew translate
np. transform: matrix(1.1, 0.15, -0.15, 1.1, 0, 0);
matrix(a, b, c, d, tx, ty)
czyli robi jednocześnie: powiększenie obrazu (scale), lekkie przechylenie (skew), efekt perspektywy
Dlaczego matrix() jest rzadkie
Bo to samo można zapisać czytelniej:
transform: scale(1.1) skewX(-8deg) skewY(8deg);
matrix() jest bardziej używane przez: biblioteki animacji, generatory CSS, silniki 3D
Część funkcji ma też osobne właściwości CSS:
.box1_1-3 {
transform: matrix3d(
1, 0, 0, 0,
0.2, 1, 0, 0,
0, 0, 1, 0,
0, -40, 0, 1);
}
.box2_1-3 {
transform: matrix3d(1.1, 0.2, 0, 0,
-0.2, 1.1, 0, 0,
0, 0, 1, 0,
20, -20, 0, 1);
}
.box3_1-3 {
transform: matrix3d(-1, 0, 0, 0,
0, 1, 0, 0,
0, 0, -1, 0,
0, 0, 0, 1);
}
.box4_1-3 {
transform: matrix3d(1, 0.2, 0, 0,
-0.2, 1, 0, 0,
0, 0, 1, 0,
0, -20, 0, 1);
}
.box5_1-3 {
transform: rotateX(180deg);
}
.box6_1-3 {
transform-origin: top;
}
.box6_1-3 {
transform: rotateX(270deg);
}
.box7_1-3 {
transform: rotateY(180deg);
}
.box8_1-3 {
transform: rotateY(-45deg);
}
.box9_1-3 {
transform: rotateZ(360deg);
}
.box10_1-3 {
transform: rotateZ(8deg)
}
.box11_1-3 {
transform: scale(1.5);
}
.box12_1-3 {
transform: scale(0.5);
}
.box13_1-3 {
transform: scale3d(1.4, 1.8, 1.6);
}
.box14_1-3 {
transform: scale3d(0.8, 0.4, 0.2);
}
.box15_1-3 {
transform: scaleX(2);
}
.box16_1-3 {
transform-origin: center;
transform: scaleX(0);
}
.box16_1-3 {
transform: scaleX(1.2);
}
.box17_1-3 {
transform: scaleY(2);
}
.box18_1-3 {
transform-origin: left;
transform: scaleY(0.5);
}
.box18_1-3 {
transform: scaleY(1.2);
}
.box19_1-3 {
transform: scaleZ(16);
}
.box20_1-3 {
transform: scaleZ(0.5);
}
.box21_1-3 {
transform: skew(-15deg, -15deg);
}
.box22_1-3 {
transform: skew(15deg, 15deg);
}
.box23_1-3 {
transform: skewX(-15deg);
}
.box24_1-3 {
transform: skewX(15deg);
}
.box25_1-3 {
transform: skewY(-15deg);
}
.box26_1-3 {
transform: skewY(15deg);
}
.box27_1-3 {
transform: translate(50%, 100%);
}
.box28_1-3 {
transform: translate(-50%, 100%);
}
.box29_1-3 {
transform: translate3d(10%, 50%, 150px);
}
.box30_1-3 {
transform: translate3d(100%, 50%, 50px);
}
.box31_1-3 {
transform: translateX(50%);
}
.box32_1-3 {
transform: translateX(-50%);
}
.box33_1-3 {
transform: translateY(50%);
}
.box34_1-3 {
transform: translateY(-50%);
}
.box35_1-3 {
transform: translateZ(50%);
}
.box36_1-3 {
transform: translateZ(-50%);
}
Jeśli nie zostanie określony czas trwania przejścia, wartości zmienią się natychmiast, bez animacji. Właściwość transition-duration określa czas, w którym powinno nastąpić przejście.
Wartość właściwości jest określana w:
Jeśli różne właściwości mają różne wartości czasu przejścia, należy je oddzielić przecinkami.
.box {
background-color: teal;
transition-property: background-color;
transition-duration: 1000ms;
}
.box:hover {
background-color: orange;
}
Właściwość transition-timing-function określa funkcję rozkładu czasu, tj. zachowanie animacji.
.box {
background-color: teal;
transition-property: background-color;
transition-duration: 1000ms;
transition-timing-function: linear;
}
.box:hover {
background-color: orange;
}
Wartość właściwości jest określana za pomocą formuły Béziera, która opisuje szybkość przejścia właściwości z jednej wartości do drugiej w czasie określonym w transition-duration,
CSS posiada kilka słów kluczowych opisujących podstawowe, często używane funkcje Béziera.
Lista transition-timing-function:
Krótkie doprecyzowanie (ważne)
Właściwość transition-delay określa opóźnienie, po którym rozpocznie się animacja przejścia. Wartością domyślną jest 0s.
transition-delay: wartość;
Wszystkie właściwości przejścia można połączyć w jedną złożoną właściwość transition.
transition: [property] [duration] [timing-function] [delay]
Jeśli animowanych jest kilka właściwości, zestaw wartości dla każdej z nich należy oddzielić przecinkiem.
Niezbędne jest określenie właściwości i czasu przejścia.
Możesz pominąć funkcję czasu i opóźnienie — zostaną wtedy użyte wartości domyślne.
Podobnie jak przejścia, animacje nadają stronom internetowym dynamiki.
Animacja różni się jednak od przejść:
Animacja jest deklarowana za pomocą reguły@keyframes. Reguła ta opisuje zestaw klatek (frames, stanów) animacji. Animacja musi zawierać co najmniej dwie klatki: początkową i końcową.
/* Nazwa powinna być opisowa, czyli wskazywać rodzaj animacji. */
@keyframes jestemAnimacja {
/* Tutaj będą opisywane klatki */
}
Klatki określają, w którym momencie zmieniają się animowane właściwości. Są one opisane słowami kluczowymi:
Ponadto klatki są często opisywane jako wartości procentowe w zakresie 0%-100%, ponieważ wartości procentowe pozwalają na proste określenie momentów zmian dla animacji o dowolnym czasie trwania.
/* Nazwa powinna być opisowa, czyli wskazywać rodzaj animacji. */
@keyframes jestemAnimacja {
0% {
/* Właściwości, które się zmieniają */
}
/* Dowolna liczba klatek pośrednich */
100% {
/* Właściwości, które się zmieniają */
}
}
Jeśli animacja trwa na przykład 6 sekund, to 0% to 0s, 50% to 3s, a 100% to 6s. Oznacza to, że wartości procentowe opisują interwały czasowe stosowane podczas trwania animacji.
Zadeklarujmy animację zmieniającą kolor tła elementu w trzech punktach: 0%, 50% i 100%.
@keyframes changeBgColor {
0% {
background-color: teal;
}
50% {
background-color: orange;
}
100% {
background-color: deepskyblue;
}
}
W animacji nie określa się czasu ani elementu, do którego zostanie zastosowana. Oznacza to, że możesz użyć tej samej animacji dla różnych elementów.
Aby użyć już zadeklarowanej animacji, musisz podać jej nazwę jako wartość właściwości animation-name.
.box {
animation-name: changeBgColor;
}
Możesz dodać animację do dowolnego standardowego selektora. Zostanie wówczas uruchomiona natychmiast po załadowaniu strony.
Możesz również zastosować animację po zdarzeniu: najechaniu, fokusie itp. Aby to zrobić, użyj odpowiednich pseudoklas.
. box {
/* Podstawowe style elementów */
}
/* Dodajemy animację po najechaniu */
.box:hover {
animation-name: changeBgColor;
}
Powala ustawić czas trwania animacji, tj. czas niezbędny do wyświetlenia wszystkich klatek.
Czas ten może być określony w sekundach lub milisekundach. Jeśli nie ustawisz czasu trwania, animacja zostanie odtworzona w czasie 0 sekund.
.box:hover {
animation-name: changeBgColor;
animation-duration: 3000ms;
}
Domyślnie animacja jest wykonywana raz, a końcowe wartości animowanych właściwości nie są zapisywane. Zamiast tego element powraca do swojego podstawowego stanu.
Właściwość animation-timing-function pozwala ustawić funkcję rozkładu czasu dla animacji.
Wartości są podobne do transition-timing-function w przejściach CSS.
.box:hover {
animation-name: changeBgColor;
animation-duration: 3000ms;
animation-timing-function: linear;
}
Właściwość animation-iteration-count określa liczbę pełnych powtórzeń animacji.
.box:hover {
animation-name: changeBgColor;
animation-duration: 3000ms;
animation-timing-function: linear;
animation-iteration-count: 5;
}
Wartość może być:
.galery-animation-iteration-count-item_2-5 {
display: flex;
width: var(--width);
aspect-ratio: 1/1;
border-radius: 4px;
box-shadow:
0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
background-color: rgb(76, 0, 255);
animation-name: changeBgColor;
animation-duration: 3000ms;
animation-timing-function: linear;
}
.box1_2-5 {
animation-iteration-count: 1;
}
Właściwość animation-play-state pozwala na zatrzymanie animacji.
Domyślną wartością jest running.
Jeśli ustawisz ją na paused, na przykład przy :hover, animacja nie uruchomi się, gdy kursor myszy znajdzie się nad elementem.
.galery-animation-play-state-item_2-6 {
display: flex;
width: var(--width);
aspect-ratio: 1/1;
border-radius: 4px;
box-shadow:
0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
background-color: rgb(76, 0, 255);
animation-name: changeBgColor;
animation-duration: 3000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
&:hover {
animation-play-state: paused;
}
}
@keyframes changeBgColor {
0% {
background-color: teal;
}
50% {
background-color: orange;
}
100% {
background-color: deepskyblue;
}
}
Właściwość animation-delay ustawia opóźnienie przed rozpoczęciem animacji w sekundach lub milisekundach, podobnie jak w przypadku przejść.
.box:hover {
animation-name: changeBgColor;
animation-duration: 3000ms;
animation-timing-function: linear;
animation-delay: 1s;
}
Właściwość animation-fill-mode określa, co dzieje się ze stylami elementu przed rozpoczęciem animacji i po jej zakończeniu. Innymi słowy, właściwość ta pozwala określić, czy style animacji powinny być stosowane do elementu, gdy animacja nie jest włączona.
animation-fill-mode: none | forwards | backwards | both
animation-fill-mode: none;
.galery-animation-fill-mode-item_2-8 {
display: flex;
width: var(--width);
aspect-ratio: 1/1;
border-radius: 4px;
background-color: rgb(76, 0, 255);
animation-name: changeBgColor;
animation-duration: 3000ms;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-delay: 3s;
}
animation-fill-mode: forwards;
@keyframes changeBgColor {
0% {
background-color: teal;
}
50% {
background-color: orange;
}
100% {
background-color: rgb(247, 8, 227);
}
}
Właściwość animation-direction:
.box:hover {
animation-name: changeBgColor;
animation-duration: 3000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
animation-direction: normal;
.galery-animation-direction-item_2-9 {
display: flex;
width: var(--width);
aspect-ratio: 1/1;
border-radius: 4px;
background-color: rgb(76, 0, 255);
font-size: 0.8rem;
animation-name: changeBgColor;
animation-duration: 3000ms;
animation-timing-function: linear;
animation-iteration-count: 2;
animation-delay: 3s;
}
animation-direction: reverse;
@keyframes changeBgColor {
0% {
background-color: teal;
}
50% {
background-color: orange;
}
100% {
background-color: rgb(247, 8, 227);
}
}
Właściwość składowa animation umożliwia skrócony zapis właściwości animacji.
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state]
Opcjonalne wartości właściwości mogą zostać pominięte lub zamienione.
Jedynymi wyjątkami są właściwości duration i delay — wartość czasu trwania animacji musi zostać zawsze określona przed wartością opóźnienia.
.box {
animation: magic 2s infinite;
}
.box {
animation: magic 2s 0.5s ease-in-out;
}
.box {
animation: magic 2s ease-in-out 0.5s forwards;
}
.box {
animation: magic 2s forwards infinite ease-out 0.5s;
}
@keyframes magic {
/* ... */
}
Transformacje CSS umożliwiają przesuwanie, obracanie i skalowanie elementów, tj. dodawanie efektów graficznych. Transformacje pozwalają zmienić kształt i położenie elementu bez wpływu na inne elementy na stronie. Domyślnie transformacja jest wykonywana względem środka elementu.
Właściwość transform jest odpowiedzialna za zastosowanie jednej lub większej liczby transformacji elementu.
transform: none | <rodzaj transformacji> <rodzaj transformacji> ...
Element przekształcony jest elementem, który ma dowolną wartość właściwości transform oprócz none.
Funkcje scaleX(tx), scaleY(ty) i scale(tx, ty) pozwalają skalować szerokość i/lub wysokość bloku bez wpływu na geometrię otaczających go elementów. Jeśli dla scale() podano jedną wartość, druga będzie taka sama.
.box {
transform: scale(1.15);
}
Początkowa wielkość elementu to — 1.
Wartości pomiędzy 1 i 0 pozwalają zmniejszyć element. Wartości większe niż 1 umożliwiają powiększenie elementu.
Na przykład, wartość scale(1.25) — to 125% oryginalnego rozmiaru, a scale(0.75) — 75%.
.galery-scale-list_3-2 {
&:hover {
.box1_3-2 {
transform: scale(1.15);
}
.box2_3-2 {
transform: scale(1);
}
.box3_3-2 {
transform: scale(0.75);
}
}
Ze wszystkich właściwości, które mogą być animowane zaleca się używanie — jeśli to możliwe — tylko dwóch: opacity (przezroczystość) i transform (transformacja). W większości przypadków animowanie innych właściwości nie wpłynie znacząco na wydajność strony, ale najlepiej jest przestrzegać tej zasady, aby stworzyć jak najbardziej wydajną animację.
Funkcja rotate(angle) pozwala obrócić elementy o określoną liczbę stopni (jednostka deg). Wartości dodatnie obracają element zgodnie z ruchem wskazówek zegara, a wartości ujemne obracają go w kierunku przeciwnym.
.box {
transform: rotate(45deg);
}
Wartości mogą być przekazywane nie tylko w stopniach, ale także w "liczbie obrotów" (jednostką jest turn). Na przykład rotate(0.5turn) to pół obrotu, analogicznie do rotate(180deg).
Funkcje translateX(tx), translateY(ty) i translate(tx, ty) pozwalają przesunąć element w poziomie (oś X) i/lub w pionie (oś Y) względem jego oryginalnego położenia.
.box {
transform: translate(100px, 200px);
}
Przesunięcie i właściwość overflow z wartością hidden są używane do tworzenia efektów graficznych z ukrytą zawartością pojawiającą się spoza bloku. Poniższy przykład pokazuje jak to działa w przeglądarce.
Efekt ten można osiągnąć w kilku prostych krokach. Przyjrzyjmy się stylom tworzącym ten efekt.
<div class="box">
<div class="overlay"></div>
</div>
Najpierw ustawiamy div.overlay bezwzględnie względem div.box i rozciągamy go do pełnej szerokości i wysokości div.box.
.box {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Korzystając z właściwości transform i translateY, przesuwamy div.overlay w dół o 100% wysokości.
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateY(100%);
}
Po najechaniu kursorem na div.box, używając transform i translateY, przywracamy div.overlay do pierwotnej pozycji.
.box:hover .overlay {
transform: translateY(0);
}
Ustawiamy dla div.box właściwość overflow na hidden, aby wizualnie ukryć div.overlay, gdy zostanie przesunięty poza div.box.
.box {
position: relative;
overflow: hidden;
}
Dodajemy przejście div.overlay, aby animować właściwość transform, animując w ten sposób wygląd nakładki.
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateY(100%);
transition: transform 250ms ease-in-out;
}
.box_3-5 {
position: relative;
overflow: hidden;
width: 200px;
aspect-ratio: 1/1;
background-color: blue;
&:hover {
.overlay_3-5 {
transform: translateY(0);
}
}
Poznajmy technikę, która umożliwia umieszczenie bezwzględnie pozycjonowanego elementu dokładnie w środku bloku, względem którego jest on pozycjonowany.
<div class="parent">
<div class="box"></div>
</div>
Technika ta jest bardzo prosta i składa się z trzech kroków.
.parent {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box_3-6 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
aspect-ratio: 1/1;
border: 10px solid #ffa000;
border-radius: 10px;
background-color: #ffc107;
}
Funkcje skewX(kąt), skewY(kąt) i skew(x-kąt, y-kąt) są używane do pochylania elementu względem osi współrzędnych. Jeśli dla skew() określono tylko jedną wartość, druga wartość będzie równa 0, będzie to odpowiednik funkcji skewX().
.box {
transform: skew(30deg);
}
.skew-container_3-7 {
display: flex;
justify-content: center;
&:hover {
.skew-box_3-7 {
transform: skew(30deg, 30deg);
}
}
.skew-box_3-7 {
width: 300px;
aspect-ratio: 1/0.5;
background-color: #303f9f;
transition: transform 1250ms ease-in-out;
}
}