Jak korzystać z przejść CSS3

Wszyscy kochają ruch. Dodanie czwartego wymiaru (czasu) do projektu witryny jest głównym sposobem projektowania opartego na ekranie, który wyróżnia się na tle projektowania druku. CSS Transitions to prosta metoda animowania właściwości elementu, który pozwala wzbogacić pewne zdarzenia w projektowanie stron internetowych bez użycia Flasha lub JavaScriptu.

W3C trafnie opisuje przejścia na swojej stronie internetowej, ponieważ "CSS Transitions pozwala na płynne zmiany właściwości wartości CSS w określonym czasie". Innymi słowy, przejścia CSS pozwalają nam modyfikować nieruchomość stopniowo, tworząc wrażenie ruchu i nasycając projekty subtelnością i emocjami, które nie są możliwe przy szybkiej zmianie.

Obsługa przeglądarki

Wszystkie nowoczesne przeglądarki (tak, nawet IE!) Obsługują teraz przejścia CSS. Co jednak ważne, jeśli przejścia nie są obsługiwane w używanej przeglądarce, przejście jest ignorowane, a zmiany właściwości zostaną zastosowane natychmiast. Ta pełna wdzięku degradacja jest podstawą najlepszej praktyki.

Aby rozszerzyć zakres obsługi przeglądarki, możemy użyć prefiksów dostawcy, co rozszerza tę funkcję o przeglądarki Firefox 4-15, Opera 10.5-12 i większość wersji Chrome i Safari. Kod, w tym alternatywne prefiksy dostawcy, wygląda następująco:

div {-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;}

Właściwość nieprefiksowana jest dodawana na dole stosu, aby zapewnić, że ostateczna implementacja przełączy wszystkie pozostałe, ponieważ właściwość przechodzi od wersji roboczej do stanu ukończonego.

Parametry przejścia

Istnieją cztery parametry dla przejść CSS:

• transition-property: właściwość do animacji lub słowo kluczowe "all" do zastosowania do wszystkich właściwości;
• czas trwania przejścia: czas trwania przejścia;
• funkcja-przejściowa-synchronizacja: łagodzenie, które ma być zastosowane, tworzy bardziej naturalnie wyglądający ruch
• opóźnienie transkrypcji: określa opóźnienie rozpoczęcia przejścia.

Ponadto można również użyć skróconej właściwości (jak w powyższym przykładzie), w której parametry są określone jako właściwość, czas trwania, funkcja czasu, opóźnienie.

Właściwości, które można przenieść

Możesz tylko przenieść właściwości, które można przetłumaczyć na wartość matematyczną. Na przykład możesz zmienić rozmiar czcionki; nie można przejść do strony z czcionką.

Pełna lista właściwości, które można obecnie przenosić, jest następująca:

położenie tła, obramowanie-dół-kolor, szerokość-granicy-szerokości, obramowanie-lewy-kolor, obramowanie-lewa-szerokość, obramowanie-prawa-kolor, obramowanie-prawa-szerokość, odstęp-border, border-top-color, border-top-width, bottom, clip, color, size-size, font-weight, height, left, odstępy między literami, margin-bottom, margin-left, margin-right, margin-top, max-height, max- szerokość, min-wysokość, min-szerokość, krycie, kontur-kolor, szerokość-obrysu, dopełnienie-dół, dopełnienie-lewo, dopełnienie-prawo, dopełnienie-górny, prawy, tekst-wcięcie, tekst-cień, górny, pionowy- wyrównanie, szerokość, odstępy między słowami, indeks z.

Korzystanie z przejść

Deklaracje przejścia są dołączone do normalnego stanu elementu. Dlatego tylko raz zadeklarowane dla kilku stanów, takich jak: focus,: active i pseudo classes.

Za pomocą poniższego kodu możemy ustawić podstawowe menu i akapit tekstu. Jest on zaprojektowany tak, aby elementy menu zmieniały kolor i kolor tła po przewróceniu, a także, aby link wstawiany zmieniał kolor podkreślenia z białego na zielony po obróceniu:

Business
  Kod 
  Projekt 
  Inspiracja 
  Różne 
  mobilny 
  Aktualności 
  Zasoby 
  Użyteczność 
  Liczba całkowita zawiera link ante inline   venenatis dapibus poseere velit aliquet.  Nullam id dolor id nibh ultricies vehicula ut id elit.  Integer posuere erat a ante venenatis dapibus posuere velit aliquet.  Nullam quis risus eget urna mollis ornare vel eu leo. 

Oto, jak to wygląda:

Czy używasz CSS3 Transitions? Jakie efekty byłeś w stanie stworzyć? Daj nam znać w komentarzach.

Wyróżniony obraz / miniatura, obraz ruchu przez Shutterstock.