Przejścia CSS3 Transitions

Przejścia CSS3,CSS Transitions

Dzięki CSS3, możemy dodać efekt przy przejściu z jednego stylu do drugiego, bez użycia animacji Flash lub JavaScript.

Internet Explorer nie obsługuje jeszcze właściwość przejścia.
Firefox 4 wymaga przedrostek-moz-.
Chrome i Safari wymaga prefiks-webkit-.
Opera wymaga prefiks-o-.

CSS3 przejścia to efekty, które pozwalają elementem stopniowo zmieniać się od jednego stylu do drugiego.

Aby to zrobić, należy określić dwie rzeczy:

    Określ właściwości CSS, który chcesz dodać efekt
    Określić czas trwania efektu.

Przykład 1 :
Efekt przejścia na własność szerokości, czas trwania: 2 sekundy:

div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

Uwaga: Jeśli czas nie jest określony, przejście nie będzie miało wpływu, bo wartość domyślna to 0.

Efekt rozpoczyna się po wprowadzeniu zmian CSS właściwość wartość. Typowa zmiana właściwości CSS byłoby, gdy użytkownik myszy nad elementem:

Przykład 2:
Określ: hover dla elementów <div>:

div:hover
{
width:300px;
}

Uwaga: Gdy kursor myszy z elementu, stopniowo zmienia się z powrotem do jej pierwotnego stylu

Przykład 3:
Wiele zmian

Aby dodać przejściowy wpływ na więcej niż jednym stylu, dodać więcej właściwości, oddzielonych przecinkami:
Dodaj wpływ na wysokość, szerokość i transformacji:

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

Właściwości transformacji

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

TABELA:

własność	ops	css
Transition -Przejście	Nieruchomość skrót do ustawiania cztery właściwości przejścia do jednego majątku	3
Transition-property-Przejście własności	Określa nazwę właściwości CSS, do którego przejście jest stosowana	3
Transition-duration - Przejscie czas trwania	Definiuje czas, przez przejście trwa. Domyślnie	3
Transition-timing-function- Przejście czas trwania funkcji	Opisuje jak prędkość podczas przejścia zostanie obliczona. Default "łatwość"	3
Transistion-Delay -Przejście opóznienia	Określa, kiedy przejście zacznie. Domyślnie 0	3

Te dwa przykłady poniżej przedstawia wszystkie właściwości przejścia:

Przykład 1:

Korzystać ze wszystkich właściwości przejścia w jednym przykładzie:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

Przykład 2:

Te same efekty przejścia jak wyżej, korzystając z właściwości przejścia skróconą metodą

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}