Transition wprowadzenie

28 lutego, 2022 kodzik

transition

Właściwość transition – efekt animacji, polegający na przejściu z jednego stanu (stylu) w drugi, czyli jednych wartości właściwości CSS w drugie. Efekt transition można określić także jako efekt przejścia.

Selektory pseudoklasy, które mogą wpłynąć na aktywowanie efektu przejścia: :hover, :focus, :active, :target

selektor { 
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; 
}

najedź kursorem

transition-property
– właściwość ta określa właściwości CSS, które maja brać udział w efekcie przejścia danego elementu HTML

transition-duration
– właściwość ta określa czas trwania efektu przejścia

transition-timing-function
– właściwość ta określa tempo efektu przejścia

linear – stała szybkość
ease – szybciej na początku, wolniej pod koniec (domyślne ustawienie)
ease-in – wolniej na początku
ease-out – wolniej pod koniec
ease-in-out – wolniej na początku i pod koniec
cubic-bezier – własne ustawienie szybkości (wartości od 0 do 1)
step-start – pominięcie ostatniej klatki
step-end – pominięcie pierwszej klatki
steps – ilość klatek animacji

transition-delay
– właściwość ta określa czas opóźnienia efektu przejścia

transition
– właściwość ta określa wszystkie wyżej wymienione właściwości CSS

transition-property

Transition-property – okeśla wartości, które zostaną poddane efektowi przejścia np. kolor tła (background), kolor czcionki (color), szerokość (width), wysokość (height)

Dla właściwości transition-property wartością domyślną jest „all”

all – wszystkie wartości
none – żadne wartości

Jeśli nie ustalimy, które właściwości elementu mają ulec przemianie, domyślnie przemianie ulegną właściwości wszystkie.

selektor { transition-property: wartości; }

.box {
    background: blue;
    width: 50px;
    height: 80px;
    transition-property: background;
    transition-duration: 5s;
}

.box:hover {
    background: silver;
}

transition-duration

Transition-duration – okeśla czas trwania przejścia

selektor { transition-duration: wartość; }

.box {
    background: blue;
    width: 50px;
    height: 80px;
    transition-property: background;
    transition-duration: 5s;
}

.box:hover {
    background: silver;
}

transition-timing-function

Transition-timing-function – szybkość wykonywania przejścia w różnych fazach jego trwania

selektor { transition-timing-function: wartość; }

.box {
    background: blue;
    width: 50px;
    height: 80px;
    transition-duration: 4s;
    transition-timing-function: linear;
}

.box:hover {
    width: 100px;
    background: silver;
}

transition-delay

Transition-delay – opóźnienie rozpoczęcia efektu

selektor { transition-delay: wartość; }

.box {
    background: blue;
    width: 50px;
    height: 80px;
    transition-property: background;
    transition-duration: 5s;
    transition-delay: 2s;
}

.box:hover {
    background: silver;
}

połączenie właściwości

selektor { transition: wartości; }

.box {
    background: blue;
    width: 50px;
    height: 80px;
    transition: width 1s linear 3s, background 3s ease-in 0s;
}

.box:hover {
    width: 100px;
    background: silver;
}

Ściąga kodera