Przejścia

Przejścia są właściwościami, które pozwalają na przesuwanie, a także dokonywanie operacji transformacji obiektów na żywo, z pomocą użytkownika, przez najechanie kursorem na obręb obiektu.

{
height: ;
width: ;
background-color: ;
transition:  czas-wykonania opóźnienie ;
}
:hover
{
transform: metody z wartościami, co ma się wydarzyć ;
}

{
transition:width 2s, height 2s, transform 2s;
}
:hover
{
transform:rotate(360deg);
}

Pierwszy przykład to operacja przejścia przez powiększenie obiektu na długości i szerokości oraz operacja transformacji obrotu obiektu. Dodany jest zakładany czas w jakim te operacje mają się wykonać.

{
transition:transform 2s;
}
:hover
{
transform: rotate3d(1,1,1,360deg);
}

Powyższy przypadek to operacja przejścia przez transformacje obrotu obiektu w trzech wymiarach o kąt 360 stopni.

transition: all 2s linear;
transition: all 2s ease;
transition: all 2s ease-in-out;
transition: all 2s ease-in;
transition: all 2s ease-out;

Powyższy przypadek ma za zadanie zilustrowanie tego, że operacje przejścia nie muszą się odbywać w takim samym tempie aby osiągnąć ten sam rezultat w po określonym czasie. Standardowa szybkość przejścia jest liniowa. Przykład pokazuje, że można wybrać inny tryb rozłożenia prędkości.

Do góry