Transition wprowadzenie

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;
}