czwartek, 2024-02-29

CSS: Własność transition

Własność transition jest potężnym narzędziem w CSS, pozwalającym na łatwe dodawanie efektów animacji, co może znacznie poprawić odbiór strony internetowej przez użytkownika. Jest bardzo wygodnym sposobem na dodanie dynamiki do elementów interfejsu użytkownika bez konieczności używania JavaScript. Umożliwia płynną zmianę wartości wybranej właściwości CSS w określonym czasie.

Podstawowa składnia transition

element {
  transition: property duration timing-function delay;
}

Gdzie:

property to nazwa właściwości CSS, której zmiana będzie animowana (np. background-color, transform);
duration to czas trwania animacji (np. 2s dla 2 sekund);
timing-function to funkcja określająca tempo animacji (np. linear, ease-in, ease-out, ease-in-out);
delay to opóźnienie przed rozpoczęciem animacji (opcjonalne).

Oddzielne właściwości dla każdego z parametrów

Własność transition to postać skrócona, dostępne są pokrewne właściwości CSS:

transition-property – definiuje nazwę właściwości CSS, której dotyczy efekt przejścia;
transition-duration – definiuje, po ilu sekundach lub milisekundach efekt przejścia jest zakończony;
transition-timing-function – definiuje krzywą prędkości efektu przejścia;
transition-delay – określa, kiedy zacznie się efekt przejścia.

Na przykład prezentowany wcześniej ogólny przykład może być rozbudowany do oddzielnych właściwości dla każdego z parametrów. Oto jak można to zapisać, rozdzielając na indywidualne właściwości:

transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: delay;

W powyższym kodzie:

property należy zastąpić nazwą właściwości CSS, którą chcesz animować, np. opacity, width itd.
duration to czas, przez który animacja powinna się odbywać, np. 0.5s lub 300ms.
timing-function to funkcja czasu, która kontroluje przebieg animacji, np. linear, ease-in, ease-out, ease-in-out, lub definicja cubic-bezier.
delay to czas opóźnienia przed rozpoczęciem animacji, np. 1s lub 100ms.

CSS transition all

Własność CSS transition można użyć z wartościami all lub konkretną nazwą właściwości, aby określić, które właściwości powinny podlegać animacji. Używanie transition: all jest prostym sposobem na animowanie wszystkich zmieniających się właściwości, ale może sprawiać problem z wydajnością lub kontrolą. Lepszym rozwiązaniem wydaje się specyfikowanie konkretnych właściwości do animacji, jednak wymaga to bardziej szczegółowego kodowania. Wybór między tymi dwoma podejściami zależy od konkretnego przypadku użycia i wymagań wydajnościowych.

Użycie transition: all

Kiedy używasz transition: all, mówisz przeglądarce, aby animowała wszystkie zmieniające się właściwości. Oznacza to, że każda zmiana właściwości CSS, która może być animowana, będzie animowana zgodnie z określonym czasem trwania, funkcją przejścia i opóźnieniem.

.element {
  transition: all 0.5s ease-in-out;
}

W tym przykładzie, jeśli jakiekolwiek animowalne właściwości .element zmienią się (np., przez pseudoklasę :hover lub przez JavaScript), zmiany te będą animowane z czasem trwania 0,5 sekundy i funkcją przejścia ease-in-out.

Zalety

Nie musisz specyfikować, które właściwości chcesz animować. Każda zmiana zostanie automatycznie uwzględniona.

Wady

Może być mniej wydajne, szczególnie jeśli na stronie jest wiele elementów z transition: all, ponieważ przeglądarka musi sprawdzać i potencjalnie animować każdą zmianę właściwości.
Mniej precyzyjna kontrola nad tym, które właściwości są animowane, co może prowadzić do nieoczekiwanych animacji.

Wartości timing-function

Wartość timing-function w CSS transition określa, jak prędkość animacji zmienia się w czasie, co pozwala kontrolować tempo przejścia animacji. Dostępne są różne funkcje czasu (timing functions), które pozwalają na różne efekty przejścia.

linear: animacja zmienia się w stałym tempie od początku do końca;
ease: domyślna wartość; animacja zaczyna się powoli, następnie przyspiesza w środku, przed zwolnieniem na końcu;
ease-in: animacja zaczyna się powoli, a następnie przyspiesza stopniowo aż do końca;
ease-out: animacja zaczyna się szybko, a następnie zwalnia stopniowo aż do końca;
ease-in-out: animacja zaczyna się powoli, przyspiesza w środku, a następnie zwalnia na końcu;
cubic-bezier(n,n,n,n): pozwala zdefiniować własną wartość funkcji czasu za pomocą krzywej Béziera, przyjmuje cztery wartości, które reprezentują punkty kontrolne krzywej (x1, y1, x2, y2), na przykład, cubic-bezier(0.25, 0.1, 0.25, 1) jest równoważne standardowej funkcji ease;
steps(int, start|end): Pozwala na wykonanie animacji krokowej, która skacze między krokami zamiast przejścia płynnego, pierwszy argument określa liczbę kroków, a drugi argument określa, czy krok ma być wykonany na początku czy na końcu każdego interwału, na przykład, steps(4, end) spowoduje, że animacja będzie składać się z czterech równych kroków.

Przykłady zastosowania transition

Zmiana koloru tła elementu przy najechaniu myszką

.button {
  background-color: blue;
  transition: background-color 0.5s ease-in-out;
}

.button:hover {
  background-color: red;
}

W tym przykładzie kolor tła przycisku zmieni się z niebieskiego na czerwony w ciągu 0.5 sekundy, gdy użytkownik najedzie na przycisk myszką.

Powiększenie elementu po najechaniu

.image {
  width: 100px;
  transition: width 1s ease-in-out;
}

.image:hover {
  width: 200px;
}

Tutaj, obrazek zostanie powiększony do szerokości 200 pikseli, gdy użytkownik najedzie na niego myszką.

Obrót elementu

.box {
  transform: rotate(0deg);
  transition: transform 1s linear;
}

.box:hover {
  transform: rotate(360deg);
}

W tym przypadku element o klasie .box obróci się o 360 stopni, gdy na niego najedziemy.

Zmiana przezroczystości (opacity)

.fade {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.fade:hover {
  opacity: 0.5;
}

Przy najechaniu myszką na element jego przezroczystość zmienia się z pełnej (1) na półprzezroczystą (0.5).

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie