Opóźnienie CSS
Przykład 1: Opóźnienie przejściowe na DIV szerokie przy użyciu podejścia styl
W tym przykładzie użyjemy właściwości opóźnienia, aby przejść do szerokości elementu DIV, przy użyciu podejścia do tagu stylu. Właściwość przejściowego opóźnienia zostanie zastosowana na div, a przejście nastąpi na szerokości DIV.
W tym skrypcie zaczniemy od nagłówka pliku. Otworzymy tag stylu i utworzymy klasę stylistyczną dla elementu DIV w tym znaczniku. W tej klasie stylizacji dodamy wysokość i szerokość dla domyślnego rozmiaru div. Następnie dodamy właściwość przejścia na szerokości, używając jej jako słowa kluczowego. Następnie zdefiniujemy czas przejścia w sekund. Na końcu tego znacznika zdefiniujemy również ograniczenie opóźnienia przejścia, nadając mu wartość w sekundach.
Następnie odziedziczymy tę klasę pod kątem funkcji zawisowej, w której dodamy właściwość szerokości, która zostanie zwiększona z poprzedniego ustawienia i aktywowana, gdy DIV zostanie unoszący. Ta zmiana szerokości będzie zarządzana przez właściwości przejściowe, w tym właściwość przejściowego, która decyduje o luce czasowej dla tego przejścia. Następnie zakończymy właściwości stylistyczne i zamkniemy znacznik stylu, aby przejść do ciała pliku. Damy stronie nagłówek w znaczniku ciała za pomocą H1 etykietka. Następnie dodamy element div za pomocą znacznika div, w którym nie dodamy żadnej wartości, ponieważ wszystko jest zdefiniowane w znaczniku stylu w nagłówku pliku.
Pierwszy fragment pokazuje, że Div jest w swoim domyślnym etapie. Po unoszeniu się na div przejście nastąpi zgodnie z właściwościami zdefiniowanymi w stylu, które można zaobserwować w drugim fragmencie.
Przykład 2: Opóźnienie przejścia na wysokości DIV za pomocą podejścia styl
W tym przykładzie użyjemy atrybutu opóźnienia, aby przejść element div pionowo za pomocą techniki tagu stylu.
Zaczniemy od nagłówka pliku w tym skrypcie. Otworzymy tag stylu w tym znaczniku i zbudujemy klasę stylistyczną dla elementu DIV. W tej klasie stylu dodamy wysokość i szerokość domyślnego rozmiaru DIV. Następnie użyjemy słowa kluczowego, aby dodać atrybut przejścia do wysokości div. Następnie po tym znaczniku zdefiniujemy czas przejścia w sekundach i ograniczenie opóźnienia przejścia, zapewniając mu wartość w sekundach. Dziedziczymy tę klasę dla funkcji zawisowej i dodamy właściwość Wysokość, która zostanie zwiększona z poprzedniej wartości i aktywowana, gdy DIV unosi się. Ta zmiana wysokości będzie zarządzana przez właściwości przejściowe, które obejmują właściwość przejściowego i określa lukę czasową dla tego przejścia.
Następnie dodamy element div z tagiem div w ciele. Plik zostanie następnie zamknięty, zamykając wszystkie tagi.
Pierwsze wyjście pokazuje, że DIV jest w stanie domyślnym. Kiedy na nim unosimy się, przejście następuje zgodnie z właściwościami dostarczonymi w znaczniku stylu, wyświetlonym w drugim wyjściu.
Przykład 3: Opóźnienie animacji po górnej stronie DIV za pomocą podejścia styl
W tym przykładzie skorzystamy z właściwości opóźnienia, stosując podejście stylu, aby animować element DIV z górnej strony.
W tym skrypcie zaczniemy od nagłówka pliku. Otworzymy tag stylu i utworzymy klasę stylistyczną dla elementu DIV w tym znaczniku. Dodamy wysokość i szerokość dla domyślnego rozmiaru DIV w tej klasie stylu. Następnie użyjemy słowa kluczowego, aby dodać właściwość animacji DIV. Następnie, na końcu tego znacznika, zapewnimy czas animacji w sekundach i ograniczenie opóźnienia przejścia, dostarczając wartość w sekundach. Zrobimy nową klasę animacji i dodamy właściwość rozmiaru dla górnej strony div, która zostanie zwiększona z poprzedniej wartości i aktywna po okresie opóźnienia.
Właściwości przejściowe będą kontrolować animację, w tym właściwość animacji, która kontroluje lukę czasową przed rozpoczęciem animacji. Atrybuty stylizacji zostaną następnie usunięte, a znacznik stylu zostanie zamknięty, umożliwiając nam przejście do ciała pliku. Dodamy element div z tagiem div, ale nie ma wartości, ponieważ wszystko jest zdefiniowane w znaczniku stylu pliku.
Pierwsze wyjście pokazuje, że DIV jest w swojej domyślnej pozycji. Kiedy kończy się czas animacji, animacja występuje zgodnie z właściwościami dostarczonymi w znaczniku stylu, jak pokazano w drugim wyjściu.
Przykład 4: Opóźnienie animacji po lewej stronie Div za pomocą podejścia styl
W tym przykładzie użyjemy atrybutu opóźnienia w połączeniu z metodą tagu stylu, aby animować element div od lewej strony.
W tym skrypcie zaczniemy od nagłówka pliku. Otworzymy tag stylu i utworzymy klasę stylistyczną dla elementu DIV w tym znaczniku. Dodamy wysokość i szerokość dla domyślnego rozmiaru DIV w tej klasie stylu. Następnie użyjemy słowa kluczowego, aby dodać właściwość animacji DIV. Następnie, na końcu tego znacznika, zapewnimy czas animacji w sekundach i ograniczenie opóźnienia przejścia, dostarczając wartość w sekundach.
Zrobimy nową klasę animacji i dodamy właściwość rozmiaru dla górnej strony div, która zostanie zwiększona z poprzedniej wartości i aktywna po okresie opóźnienia. Właściwości przejściowe będą kontrolować animację, w tym właściwość animacji, która kontroluje lukę czasową przed rozpoczęciem animacji. Atrybuty stylizacji zostaną następnie usunięte, a znacznik stylu zostanie zamknięty, umożliwiając nam przejście do ciała pliku. Dodamy element div z tagiem div, ale nie ma wartości, ponieważ wszystko jest zdefiniowane w znaczniku stylu pliku.
Div znajduje się w swojej domyślnej pozycji, jak pokazano w pierwszym wyniku. Po wygaśnięciu czasu animacji opóźnienia, animacja ma miejsce zgodnie z parametrami określonymi w znaczniku stylu, jak pokazano w drugim wyjściu.
Wniosek
W tym artykule omówiliśmy stosowanie właściwości opóźnienia CSS w języku znaczników hipertekstu. Właściwość opóźnienia jest powszechnie używana z właściwością przejścia i animacji CSS. Ta właściwość jest wykorzystywana jako subproperty dla właściwości animacji i przejściowej, która pomaga zdefiniować opóźnienie poszczególnych właściwości. Wdrożyliśmy te właściwości z właściwością opóźnienia jako subproperty w środowisku notatnika ++.