HTML5 – przejścia

Przejścia należą do nowej serii efektów, które są włączone do HTML5 i które można regulować za pomocą CSS3Wcześniej tego typu efekty musiały być wykonywane przez Javascript przy użyciu jednej z wielu dostępnych bibliotek i frameworków (Mootools, Jquery itp.), ale kiedy wprowadzono nowy standard, takie efekty zostały włączone, jak przejścia, animacje, przekształcenia …
Korzystanie z przejść
Zanim zobaczymy, jak korzystać z przejścia, musimy wiedzieć, co to jest. Wiemy, że kiedy wprowadzamy zmianę w nieruchomości : unosić się po najechaniu myszą na element, natychmiast przyjmuje styl przypisany, gdy mysz jest nad nim, przejście to nic innego jak kontrola nad tym, jak ta zmiana ma zostać wykonana, to znaczy czas trwania zmiany, prędkość która ma zostać przeprowadzona, aby osiągnąć efekt jak mieszanka starego i nowego stanu.
Możemy zatem podsumować, że przejście to przejście z jednego stanu do drugiego w dokumencie HTML i wszystkich właściwości, za pomocą których można dokonać tej zmiany, na poniższym obrazku widzimy stan początkowy i stan końcowy, przejście jest tym, co się dzieje Między obydwoma.
POWIĘKSZAĆ
Właściwości przejścia
Zobaczmy właściwości i atrybuty, których możemy użyć do wykonania przejścia:

• Opóźnienie przejścia: Określa opóźnienie w jednostce czasu, po którym aplikacja efektu zostanie uruchomiona.
• czas trwania przejścia: Określa czas, w którym ma nastąpić przejście.
• nieruchomość przejściowa: Określa, do której właściwości ma zostać zastosowane przejście.
• funkcja czasu przejścia: Określa sposób, w jaki będą traktowane wartości pośrednie podczas wykonywania przejścia.
• przemiana: Jest to skrót, za pomocą którego możemy zastosować wszystkie właściwości przejścia w jednej deklaracji CSS. Można to podsumować następująco: przejście:

Musimy to podkreślić przejście-opóźnienie Tak okres przejściowy użyj jednostek czasu jako wartości, więc musi być określony za pomocą s sekundy lub SM milisekundy.
Zobaczmy przykład, jak wykonać przejście dla elementu w HTML5, zobaczmy następujący kod:

 Przykład
Istnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.

Jak widać, zaimplementowaliśmy różne właściwości elementu przejściowego za pomocą prefiksu -webkit, to upewnia nas, że będzie spełniony dla przeglądarek Chrom Tak Safari, aby wdrożyć je dla Firefox Tak Opera musimy również dołączyć przedrostki -moz i -o.
Możemy również zauważyć, że ustawiamy opóźnienie w 100ms, co oznacza, że ​​będzie miał małe opóźnienie przed rozpoczęciem przejścia, wtedy cały czas trwania efektu powinien trwać 500ms, co jest ustalone w Trwanie.
Zobaczmy obrazek ze wszystkimi fazami efektu:
POWIĘKSZAĆ
Jak widać przejście sprawia, że ​​efekt nakłada się stopniowo w określonym czasie.
Na tym kończymy samouczek dotyczący stosowania efektu przejścia do elementu w HTML5, musimy kontynuować ćwiczenie, aż stanie się naturalne, aby umieścić wymagany kod, aby nasze dokumenty i strony osiągnęły większą dynamikę.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt