Przejścia

4.1 Właściwość transition

Przejścia CSS (transition) pozwalają animować zmiany wartości właściwości CSS, tworząc płynne przejścia między ich stanami początkowymi i końcowymi. To potężne narzędzie, które poprawia komfort użytkowania, dodając dynamikę do stron internetowych. Rozważmy główne aspekty przejść, w tym właściwości, czas trwania i funkcje timingu.

Właściwość transition łączy wszystkie aspekty przejścia w jedną właściwość. Może zawierać:

1. Właściwości, które będą animowane.
2. Czas trwania animacji.
3. Funkcję timingu.
4. Opóźnienie przed rozpoczęciem animacji (opcjonalnie).

Składnia:

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

Gdzie:

• property: właściwość, do której stosuje się przejście (np. width, height, background-color)
• duration: czas trwania przejścia (np. 2s dla dwóch sekund lub 500ms dla 500 milisekund)
• timing-function: funkcja timingu, określająca prędkość zmiany animacji (np. ease, linear, ease-in, ease-out, ease-in-out)
• delay: opóźnienie przed rozpoczęciem przejścia (np. 1s dla jednej sekundy)

Przykład:

    
      
       
   
       
   
       
   

     Zawartość 
   
    
  

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s ease-in-out, background-color 1s ease;
      }
    
  

Objaśnienie kodu:

• transition: width 2s ease-in-out, background-color 1s ease: określa dwa przejścia: jedno dla właściwości width z czasem trwania 2 sekundy i funkcją timingu ease-in-out, a drugie dla właściwości background-color z czasem trwania 1 sekundy i funkcją timingu ease

4.2 Właściwości przejść

1. Właściwość transition-property

Właściwość transition-property określa, do których właściwości elementu będą stosowane przejścia.

Składnia:

    
      element {
        transition-property: property1, property2 ...;
      }
    
  

Przykład:

    
      .box {
        transition-property: width, height, background-color;
      }
    
  

2. Właściwość transition-duration

Właściwość transition-duration określa czas trwania przejścia.

Składnia:

    
      element {
        transition-duration: time;
      }
    
  

Przykład:

    
      .box {
        transition-duration: 2s, 1s, 3s;
      }
    
  

3. Właściwość transition-timing-function

Właściwość transition-timing-function określa prędkość zmiany animacji w czasie.

Składnia:

    
      element {
        transition-timing-function: function;
      }
    
  

Przykład:

    
      .box {
        transition-timing-function: ease-in, linear, ease-out;
      }
    
  

4. Właściwość transition-delay

Właściwość transition-delay określa opóźnienie przed rozpoczęciem przejścia.

Składnia:

    
      element {
        transition-delay: time;
      }
    
  

Przykład:

    
      .box {
        transition-delay: 1s, 0s, 500ms;
      }
    
  

4.3 Czas trwania przejść

Czas trwania przejścia określa, jak długo będzie trwała animacja zmiany właściwości. Jest określany w sekundach (s) lub milisekundach (ms).

Przykład:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s, height 1s, background-color 500ms;
      }
    
  

Objaśnienie kodu:

• transition: width 2s, height 1s, background-color 500ms: określa, że przejście dla właściwości width będzie trwało 2 sekundy, dla height — 1 sekundę, a dla background-color — 500 milisekund.

4.4 Funkcje timingu

Funkcje timingu określają, jak wartość właściwości zmienia się w czasie. Pozwalają tworzyć różne efekty animacji.

Podstawowe funkcje timingu:

• ease: animacja zaczyna się powoli, przyspiesza w środku i zwalnia na końcu
• linear: animacja odbywa się z stałą prędkością od początku do końca
• ease-in: animacja zaczyna się powoli, a potem przyspiesza
• ease-out: animacja zaczyna się szybko, a potem zwalnia
• ease-in-out: animacja zaczyna i kończy się powoli, przyspiesza w środku

Przykład:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transition: width 2s ease-in-out, height 1s linear, background-color 500ms ease;
      }
    
  

Objaśnienie kodu:

• ease-in-out: płynne przejście, zaczynające się i kończące się powoli
• linear: przejście z stałą prędkością
• ease: przejście z powolnym początkiem i końcem, przyspieszające w środku