Latest web development tutorials

przejścia CSS3

przejścia CSS3

CSS3, musimy dodać efekt, który można przekształcić z jednego stylu w innym czasie, bez użycia animacji Flash lub JavaScript. Najedź na następujących elementach:


Najedź na następujących elementach:

CSS3
przejście

Pomoc Browser

Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji obiektu.

Natychmiast po -webkit- cyfrowego -ms- lub -moz- temu w uzasadnieniu przedrostka atrybutu pierwszy numer wersji przeglądarki.

属性
transition 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-delay 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-duration 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-property 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-timing-function 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

Jak to działa?

Przejście CSS3 jest elementem stopniowo zmieniać z jednego stylu na inny efekt.

W tym celu, dwie rzeczy muszą być zdefiniowane:

  • Chcę dodać efekt właściwości CSS
  • Określ czas trwania efektu.
OperaSafariChromeFirefoxInternet Explorer

Przykłady

atrybut width zastosowano efekt przejścia, czas trwania 2 sekundy:

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

Uwaga: Jeśli nie zostanie określony limit czasu, przejście będzie miało żadnego wpływu, ponieważ wartość domyślna to 0.

Efekt będzie zmieniać wartości określonych zmian własności CSS. Typowa zmiana właściwości CSS jest myszy nad elementem użytkownika:

OperaSafariChromeFirefoxInternet Explorer

Przykłady

Przepisy gdy zawieszenie wskaźnik myszy (: hover) do elementu <div>, gdy:

div: hover
{
width: 300px;
}

Spróbuj »

Uwaga: Gdy kursor myszy na elemencie, stopniowo zmienia swój oryginalny styl


Liczba zmian

Aby dodać więcej niż jeden efekt stylu zmieniać, dodawać atrybutów oddzielonych przecinkami:

OperaSafariChromeFirefoxInternet Explorer

Przykłady

Dodano efekty szerokość, wysokość i przejściowe:

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

Spróbuj »


Właściwości przejściowe

Poniższa tabela zawiera wszystkie właściwości przejścia:

nieruchomość opis CSS
przejście Skrócona forma ustalania cztery właściwości przejścia w jednym obiekcie. 3
Obiekt przejściowego Nazwa przejścia własności CSS stosować przepisy. 3
Okres przejściowy Aby określić czas spędzony efekt przejścia. Wartość domyślna to 0. 3
Przejście-timing-function Z góry określony czas przejścia krzywej efekt. Domyślną wartością jest "łatwość". 3
Przejście opóźnienia Przepisy kiedy zacząć efekt przejścia. Wartość domyślna to 0. 3

Poniższe dwa przykłady ustawić wszystkie atrybuty przejścia:

OperaSafariChromeFirefoxInternet Explorer

Przykłady

Wykorzystaj wszystkie właściwości przejścia w jednym przykładzie:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

Spróbuj »

OperaSafariChromeFirefoxInternet Explorer

Przykłady

A przykłady takich samych efektów przejścia wyżej, ale używa skrótowej właściwości przejścia:

div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}

Spróbuj »