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:
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.
Przykłady
atrybut width zastosowano efekt przejścia, czas trwania 2 sekundy:
{
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:
Przykłady
Przepisy gdy zawieszenie wskaźnik myszy (: hover) do elementu <div>, gdy:
{
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:
Przykłady
Dodano efekty szerokość, wysokość i przejściowe:
{
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:
Przykłady
Wykorzystaj wszystkie właściwości przejścia w jednym przykładzie:
{
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 »
Przykłady
A przykłady takich samych efektów przejścia wyżej, ale używa skrótowej właściwości przejścia:
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
Spróbuj »