Jak korzystać z CSS3 Przejścia i animacje, aby wyróżnić zmiany interfejsu użytkownika

Projektanci i artyści mają długą historię eksperymentowania z ruchem, efektami i różnego rodzaju iluzjami w celu dodania dodatkowej warstwy do ich pracy. Ruch op-art zaczął wykorzystywać złudzenia optyczne w latach 60., aby sprawiać wrażenie ruchu.

Od tego czasu pojawiły się nowsze i nowsze podejścia, takie jak ostatnio popularna sztuka kinetyczna, która rozszerza perspektywę widza za pomocą wielowymiarowego ruchu. Motion pojawił się także w informatyce wraz z wynalezieniem pierwszego migającego kursora w 1967 roku.

W rozwoju frontonu elementy DOM były zwykle animowane przez JavaScript przed wydaniem CSS3 i jest to metoda, która nadal działa, ale nowe właściwości wprowadzone przez CSS3 pozwalają nam ulepszać nasze projekty z różnymi efektami i ruchem w bardziej intuicyjny sposób.

Dwie główne techniki oferowane przez CSS3 to przejścia i animacje. W tym poście przyjrzymy się, czym one są, jaka jest między nimi różnica i jak możesz z nich korzystać.

Przejścia

Oba przejścia i animacje są używane wizualizować zmiany w stanie elementu HTML przez modyfikowanie jednej lub więcej właściwości CSS.

Najprostszą formą wizualizacji zmiany stanu jest zmiana koloru przycisku lub łącza, gdy jest on zawieszony. Kiedy to się dzieje, element zyskuje nieco inny styl, który jest zwykle zauważany przez widza tak, jakby coś przesunęło się na ekranie.

Zmiana właściwości CSS łącza na najeździe (lub fokusie lub kliknięciu) jest najstarszą i najprostszą formą przejść i istniała na długo przed erą CSS3.

 a kolor: pomarańczowy;  a: hover color: red;  a: focus color: blue;  a: visited color: green; 

Przejścia są używane, gdy element HTML zmienia się z jednego predefiniowanego stanu na inny. CSS3 wprowadził nowe właściwości, które pozwalają na bardziej wyrafinowane wizualizacje niż wcześniej, takie jak funkcje czasowe lub kontrola czasu trwania.

Przyjrzymy się nowym właściwościom CSS w następnej sekcji, po zrozumieniu, jak różnią się animacje. Na razie zobaczmy najważniejsze rzeczy, które musisz wiedzieć o przejściach.

1. Zawsze mają początek i koniec.
2. Stany między punktem początkowym i końcowym są domyślnie zdefiniowane przez przeglądarkę, nie możemy tego zmienić za pomocą CSS.
3. Oni wymagają wyraźne wyzwalanie, takie jak dodanie nowej pseudoklasy przez CSS lub nowej klasy przez jQuery.

Możesz zobaczyć piękny przykład inteligentnie wykorzystanych przejść CSS3 poniżej, w których autor ujawnia ukryte informacje w sposób nieinwazyjny, ale nadal kieruje uwagę użytkowników na nową treść.

Animacje

Jeśli chcemy wizualizować zmiany stanu bardziej skomplikowanymi ruchami lub jeśli nie mamy wyraźnego wyzwalacza, np. jeśli chcemy rozpocząć efekt, gdy strona ładuje się, animacje są dobrym rozwiązaniem.

Animacje umożliwiają zdefiniowanie bardziej złożonej ścieżki poprzez ustawienie i skonfigurowanie naszej własnej klatki kluczowe. Klatki kluczowe są punktami pośrednimi w trakcie animacji, które pozwalają nam zmienić styl animowanego elementu tyle razy, ile chcemy.

Chociaż CSS3 oferuje wspaniałe sposoby na tworzenie wyrafinowanych animacji, zazwyczaj trudniej je tworzyć niż przejścia, dlatego istnieje wiele świetnych bibliotek animacji, które mogą ułatwić naszą pracę.

Najważniejsze rzeczy, które musisz wiedzieć o animacjach CSS3, to:

1. nie wymagają jawnego wyzwalania, mogą zacząć od ładowania strony lub gdy w przeglądarce odbywa się inne zdarzenie DOM
2. mogą być używane w przypadkach, gdy używane są przejścia, na przykład gdy nowa klasa lub pseudoklaska jest dodawana lub usuwana (chociaż jest to rzadszy przypadek użycia)
3. wymagają od nas zdefiniowania niektórych klatek kluczowych (stanów pośrednich)
4. możemy określić liczbę, częstotliwość i styl tych klatek kluczowych

W poniższym przykładzie możesz zobaczyć fajne animowane menu rozwijane. Animacja rozpoczyna się po kliknięciu przycisku. Osiąga się to poprzez dodanie dodatkowych klas do elementów listy za pomocą jQuery, gdy wystąpi zdarzenie click.

Te nowe klasy są animowane z określonym @klucze reguły w pliku CSS. Dodatkowe klasy są usuwane przez jQuery, gdy użytkownik kliknie przycisk następnym razem, a menu zostanie ponownie ukryte.

Właściwości CSS i The @klucze At-Rule

Do przejść możemy użyć albo przejście skrócona właściwość lub 4 pojedyncze właściwości związane z przejściem: własność przejściowa, czas trwania przejścia, funkcja czasowa przejścia, i opóźnienie przejścia. Skrócona właściwość zawiera wszystkie pojedyncze właściwości w skróconej formie.

Dla animacji jest animacja skrótowa własność, która oznacza nie mniej niż 8 pojedynczych właściwości animacji, a mianowicie nazwa-animacji, czas trwania animacji, funkcja synchronizacji czasu, opóźnienie animacji, liczba iteracji animacji, kierunek animacji, tryb wypełniania animacji, i animacja-stan-gry.

Najważniejsze w przypadku przejść i animacji jest to, że zawsze należy określić właściwości CSS, które zostaną zmodyfikowane podczas zmiany stanu. Z przejściami wygląda to tak:

 .element tło: pomarańczowy; właściwość przejścia: tło; czas trwania przejścia: 3s; funkcja czasowa przejścia: łatwość wejścia;  .element: hover background: red; 

Określiliśmy tło właściwość, ponieważ to, co zostanie zmienione podczas przejścia.

Możemy zmienić więcej niż jedną właściwość CSS w jednym przejściu, w tym przypadku powyższy kod zostanie zmodyfikowany w ten sposób: transition-property: background, border;. Możemy również użyć własność przejściowa: wszystko;, jeśli nie chcemy osobno określać każdej właściwości.

Możemy wybrać skrót przejście również nieruchomości. Jeśli to zrobimy, zawsze musimy zwrócić uwagę na prawidłową kolejność właściwości wewnętrznych (patrz składnia w dokumentach).

 .element tło: pomarańczowy; przejście: łatwość w tle 3s;  .element: hover background: red; 

Jeśli chcemy utworzyć animację, musimy określić powiązaną klatki kluczowe. Właściwości CSS muszą zostać zmodyfikowane osobno @klucze zasady. Oto przykład, jak możemy to zrobić:

 .element pozycja: względny; nazwa-animacji: slajd; czas trwania animacji: 3s; funkcja synchronizacji animacji: łatwość wprowadzania;  @keyframes slide 0% left: 0;  50% left: 200px;  100% left: 400px; 

W powyższym przykładzie stworzyliśmy bardzo prosty efekt przesuwny. Zdefiniowaliśmy nazwa-animacji, następnie związałem z nim 3 klatki kluczowe, które określiliśmy w @keyframes slide … zasady. Wartości procentowe odnoszą się do czasu trwania animacji, więc 50% dzieje się w przykładzie na 1,5 sekundy.

Możemy użyć skrótu animacja właściwości, lub może zdefiniować klatki kluczowe z prostszym od do rządzić w następujący sposób:

 .element pozycja: względny; animacja: łatwość slajdu 3s;  @keyframes slide from left: 0;  do left: 400px; 

Tworzenie bardziej złożonych animacji jest własną formą sztuki, jeśli jesteś zainteresowany, możesz przeczytać dwa z naszych samouczków animacji na temat tworzenia zaawansowanej markizy i jak stworzyć efekt odbicia.

Podczas budowania przejść i animacji musisz to wiedzieć nie wszystkie właściwości CSS mogą być animowane, więc zawsze dobrym pomysłem jest sprawdzenie właściwości, którą chcesz zmienić w CSS Animatable.

Animacje i przejścia CSS3 przez długi czas działały z prefiksami dostawcy, których nie musimy już używać, jednak Mozilla Developer Network nadal zaleca dodanie -webkit prefiks na chwilę, ponieważ obsługa przeglądarek opartych na Webkit dopiero niedawno osiągnęła stabilność.