Przejścia w CSS

Aby Twój projekt internetowy był atrakcyjny, musisz dodać pewne animacje do swojej treści. Do obsługi zachowania tych animacji używane są przejścia CSS. Przejścia są określane jako zmiana w stanie elementu płynnie w określonym czasie trwania. Dlatego przy stosowaniu efektów przejściowych na różne elementy CSS należy określić właściwość CSS, na którą zastosowano efekt, a także czas efektu. Określenie czasu trwania jest bardzo ważne lub w inny sposób, nie będzie wpływu przejścia na konkretny element.

Istnieją pewne właściwości przejściowe CSS, które są używane do dodawania efektów przejściowych na różne elementy, wyjaśniliśmy je szczegółowo poniżej.

Właściwości przejściowe CSS

CSS zapewnia różne właściwości przejściowe, które są następujące.

1. przejściowa-proporcja
2. Przejście
3. Transition-Delay
4. funkcja przejściowa
5. przemiana

Wszystkie wyżej wymienione właściwości są wyjaśnione poniżej.

przejściowa-proporcja

Ta właściwość służy do określenia różnych właściwości CSS, do których należy zastosować efekt przejściowy.

Składnia

Transition-Property: Brak | Wszystkie | właściwość | dziedzictwo | wstępny;

Cała wartość jest wartością domyślną, która stosuje efekt przejścia do wszystkich określonych właściwości, podczas gdy wartość właściwości określa nazwę właściwości, na której zastosowano efekt.

Przykład
Załóżmy, że chcesz zmienić szerokość i wysokość kontenera Div za pomocą właściwości przejściowej.

Html

Przynieś mi myszkę

Po prostu definiujemy kontener DIV.

CSS

div
szerokość: 100px;
Wysokość: 90px;
Tło: różowy;
Przejście-proporty: szerokość, wysokość;
Przejście: 2s;

Div: Hover
szerokość: 250px;
Wysokość: 250px;

Ustawiamy pierwotną szerokość Div na 100px i wysokość na 90px, a następnie stosujemy efekt przejściowy zarówno na szerokość, jak i wysokość Div przez 2 sekundy. Określenie czasu trwania jest koniecznością, w przeciwnym razie przejście nie będzie miało zastosowania. Ponadto efekt przejścia nastąpi, gdy użytkownik przyniesie mysz na kontener Div.

Wyjście

Efekt przejściowy został pomyślnie wdrożony na kontenerze DIV.

Przejście

Ta właściwość określa, jak długo powinien nadal nastąpić efekt przejścia. Każdej właściwości może otrzymać jeden czas trwania lub możesz przypisać różne czasy do różnych właściwości CSS.

Składnia

Czas trwania: czas | dziedzictwo | wstępny;

Parametr czasu określa czas trwania efektu przejścia.

Przykład
Załóżmy, że chcesz zwiększyć rozmiar czcionki i wagę akapitu, gdy przyniesiony jest kursor myszy.

Html

Przynieś mi myszkę

Zdefiniowaliśmy nasz akapit.

CSS

P
Rozmiar czcionki: 20px;
Transition-Property: Font-Size;
Przejście: 3s;

P: Hover
Rozmiar czcionki: 50px;

Powyższy kod określa, że ​​gdy kursor myszy zostanie wniesiony na akapit, rozmiar czcionki akapitu zmieni się i ten efekt nastąpi przez 3 sekundy.

Wyjście

Nieruchomość czasu trwania przejścia działa poprawnie.

Transition-Delay

Ta właściwość określa opóźnienie między zmianą właściwości a rozpoczęciem efektu przejścia.

Składnia

Czas trwania: czas | dziedzictwo | wstępny;

Parametr czasu określa czas oczekiwania przed rozpoczęciem efektu przejścia.

Przykład
Załóżmy, że chcesz zastosować efekt przejścia na element DIV po opóźnieniu 2 sekund, postępuj zgodnie z przykładem.

Html

Przynieś mi myszkę

W powyższym kodzie po prostu utworzyliśmy kontener Div.

CSS

div
Wysokość: 100px;
szerokość: 100px;
kolor tła: różowy;
przejście-proporty: wzrost;
Przejście: 3s;
Transition-Delay: 2s;

Div: Hover
Wysokość: 200px;

Zgodnie z powyższym kodeksem efekt przejścia nastąpi po opóźnieniu 2 sekund.

Wyjście

Jest to efekt przejściowy z opóźnieniem 2 sekund.

funkcja przejściowa

Ta właściwość służy do zdefiniowania krzywej przyspieszenia efektu przejścia.

Składnia

Funkcja przejściowa: łatwość | liniowy | łatwość | łatwość | Łatwość | Cubic-Bezier (N, N, N, N);

Wszystkie parametry są wyjaśnione poniżej.

• łatwość: Efekt przejściowy występuje w sposób wolno szybki.
• liniowy: Efekt przejścia będzie miał taką samą prędkość od początku do końca.
• łatwość: Efekt przejścia będzie miał powolny początek.
• Ułatwianie: Efekt przejściowy będzie miał powolny zakończenie.
• Łatwo: Efekt przejścia będzie miał powolny początek, a także powolny koniec.
• Cubic-Bezier (N, N, N, N): Wartości efektu przejścia zostaną ustawione w sposób sześcienny.

Przykład
Rozważ przykład poniżej.

Html

Przynieś mi myszkę

Po prostu utworzono kontener DIV.

CSS

div
Wysokość: 100px;
szerokość: 100px;
kolor tła: różowy;
przejście-proporcja: szerokość;
Przejście: 2s;
Funkcja przejściowa: liniowa;

Div: Hover
szerokość: 200px;

Zgodnie z powyższym kodem szerokość kontenera Div zmieni się w sposób liniowy, co oznacza, że ​​efekt przejściowy będzie miał taką samą prędkość od początku do końca.

Wyjście

Efekt przejścia odbywa się w sposób liniowy.

przemiana

Ta właściwość jest właściwością skrótów, która jest używana do ustawiania wartości na wszystkie powyższe właściwości przejściowe.

Składnia

przejście: (właściwość) (czas trwania) (funkcja czasowa) (opóźnienie);

Przykład
Poniższy przykład pokazuje działanie właściwości przejściowej.

CSS

div
Wysokość: 100px;
szerokość: 100px;
kolor tła: LighteAgreen;
Przejście: szerokość 0.5s liniowy 1s;

Div: Hover
szerokość: 200px;

Korzystając z właściwości przejściowej, stosujemy efekt przejściowy na szerokość dla 0.5 sekund w sposób liniowy z opóźnieniem 1 sekund.

Wyjście

Nieruchomość przejściowa działa poprawnie.

Wniosek

Przejścia są określane jako zmiana w stanie elementu płynnie w określonym czasie trwania. CSS zapewnia różne właściwości przejściowe, które są następujące: przejście-proporcja, czas trwania przejścia, opóźnienie przejściowe, funkcja przejściowa i przejście. Wszystkie te właściwości są używane do określenia zachowania efektu przejścia stosowanego na różne elementy HTML. W tym przewodniku wszystkie te właściwości są wyjaśnione za pomocą odpowiednich przykładów.