CSS3 Transitions
Przejścia CSS3 pozwala na zmianę wartości nieruchomości gładko (od jednej wartości do drugiej), w określonym czasie.
Przykład: myszy nad elementem poniżej, aby zobaczyć efekt przejścia CSS3:
Przeglądarki obsługiwane przez Transitions
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit-, -moz- lub -o- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| 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 korzystać z CSS3 Transitions?
Aby utworzyć efekt przejścia, należy podać dwie rzeczy:
- właściwość CSS chcesz dodać efekt do
- czas trwania efektu
Uwaga: Jeśli część czas nie jest określony, przejście będzie miało żadnego wpływu, ponieważ wartość domyślna to 0.
Poniższy przykład pokazuje 100px * 100px czerwona <div> element. <div> Element jest również określona efekt przejścia dla właściwości width, trwające 2 sekundy:
Przykład
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
Efekt przejścia rozpocznie się, gdy określona właściwość CSS (szerokość) zmienia wartość.
Teraz, niech nam określić nową wartość dla właściwości width, gdy użytkownik najedzie myszą na <div> element:
Zauważ, że gdy kursor myszy na elemencie, będzie stopniowo powrócić do swojego pierwotnego stylu.
Zmienić kilka wartości własności
Poniższy przykład dodaje efekt przejścia zarówno szerokość i wysokość obiektu, z czasem trwania 2 sekundy dla szerokości i 4 sekund na wysokości:
Przykład
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
Spróbuj sam " Określanie krzywej prędkości przejścia
transition-timing-function właściwość określa krzywą efektu przejścia prędkości.
Obiekt przejściowy-timing-function może mieć następujące wartości:
-
ease- określa efekt przejścia z powolnym początku, a potem szybko, po czym powoli kończy (jest to ustawienie domyślne) -
linear- określa efekt przejścia z tą samą prędkością, od początku do końca -
ease-in- określa efekt przejścia z powolnym starcie -
ease-out- określa efekt przejścia z powolnym końca -
ease-in-out- określa efekt przejścia z powolnym początkiem i końcem -
cubic-bezier(n,n,n,n)- pozwala zdefiniować własne wartości w cubic-bezier funkcji
Poniższy przykład pokazuje, że niektóre z różnych krzywych prędkości, które mogą być stosowane:
Przykład
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;} Spróbuj sam " Opóźnić Efekt przejścia
transition-delay właściwość określa opóźnienie (w sekundach) dla efektu przejścia.
Poniższy przykład ma 1 sekundowe opóźnienie przed rozpoczęciem:
Transition + Transformacja
Poniższy przykład dodaje również transformację do efektu przejścia:
Przykład
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} Spróbuj sam " Więcej Transition Przykłady
Właściwości przejścia CSS3 można określić jeden po drugim, jak poniżej:
Przykład
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Spróbuj sam " lub za pomocą skrótowej własności transition :
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »
Właściwości CSS3 Transition
Poniższa tabela zawiera wszystkie właściwości przejścia:
| Nieruchomość | Opis |
|---|---|
| transition | Skrót nieruchomości na ustawienie czterech właściwości przejścia w jeden obiekt |
| transition-delay | Określa opóźnienie (w sekundach) dla efektu przejścia |
| transition-duration | Określa ile sekund lub milisekund efekt przejściowy trwa do ukończenia |
| transition-property | Określa nazwę właściwości CSS efekt przejścia jest dla |
| transition-timing-function | Określa krzywą efektu przejścia prędkości |