Jak odtwarzać wiele animacji CSS w tym samym czasie?

W tym artykule przedstawiono praktyczną demonstrację odtwarzania/dodawania wielu animacji CSS w tym samym czasie.

Jak odtwarzać wiele animacji CSS w tym samym czasie?

Stosując jednocześnie wiele animacji CSS, programiści mogą łatwo tworzyć bardziej atrakcyjne interfejsy. Aby odtwarzać wiele animacji CSS w tym samym czasie, nadaj każdej z nich unikalną nazwę i zastosuj te nazwy do tych samych lub oddzielnych komponentów na stronie.

Postępuj zgodnie z poniższą procedurą, aby odtworzyć/dodać więcej niż jedną animację w tym samym czasie.

Krok 1: Tworzenie struktury

Najpierw utwórz element HTML, w którym animacje zostaną zastosowane w kolejnych krokach. Na przykład obraz zostanie wstawiony:

W powyższym fragmencie kodu:

• Najpierw ścieżka obrazu jest ustawiona na „ źródło ' atrybut.
• Następnie wartość „ 100 pikseli ” jest dostarczane do właściwości CSS „width” i „height”.
• Ustaw także wartość „ animować ' do ' klasa ' atrybut.

Krok 2: Konfigurowanie animacji

„ klatki kluczowe ” są wykorzystywane do tworzenia niestandardowych animacji zgodnie z potrzebami strony internetowej. Na przykład w poniższym fragmencie kodu tworzone są dwie animacje:

W powyższym fragmencie kodu:

• Po pierwsze ' @-webkit-klatki kluczowe ” mechanizm jest wykorzystywany do konfigurowania „ kręcić się ' I ' obracać się ” nazwane animacje.
• Następnie użyj „ przekształcać „właściwość, która ma wartość” obracać się() ' w ' kręcić się ” korpus animacji. Ta funkcja obraca element o kąt „ 180 stopni ”.
• Następnie ustaw animację, która powiększa lub wydłuża oryginalny element o współczynnik „ 1 ” zarówno w „ X ' I ' I ” oś w „ skala ” korpus animacji.

Krok 3: Stosowanie animacji w elementach HTML

W części CSS wybierz klasę „ animować ”, który jest przypisany do ” i podaj następujące właściwości CSS:

Opis właściwości użytych w powyższym bloku kodu:

• Najpierw ustaw wartość „ absolutny ” do CSS “ pozycja ' nieruchomość. Wyrównuje „ img ” zgodnie z animacją.
• Następnie podaj wartości „ 60% ”, „ 110 pikseli ' I ' 110 pikseli ” do CSS “ lewy ”, „ szerokość ' I ' wysokość ' nieruchomości. Te właściwości są wykorzystywane do ustawiania pozycji i rozmiaru elementu.
• Następnie ustaw wartość „ skala 3s nieskończona liniowa ' do ' -animacja-webkit „Właściwość CSS.
• A „ 3s ” to czas trwania tej animacji, „ nieskończony ” to czas trwania animacji, a „ liniowy ” to kierunek animacji.
• Na koniec podaj wartości „ spin 2s nieskończona liniowa ” do CSS “ -animacja-webkit ' nieruchomość. Ta właściwość dodaje drugą animację o nazwie „ kręcić się ' na ' img ' element.

Po skompilowaniu powyższego bloku kodu animacja wygląda następująco:

Powyższy gif pokazuje, że tylko „ kręcić się ” na docelowym elemencie jest odtwarzana animacja.

Krok 4: Odtwarzanie wielu animacji w elementach HTML

Podobnie jak w powyższym kroku, do elementu została zastosowana tylko jedna animacja. Dzieje się tak, ponieważ do tego samego „ -animacja-webkit ' nieruchomość.

Aby rozwiązać ten problem, umieść element docelowy w innym elemencie HTML. jako „ dz ” jest już używany jako opakowanie w pierwszym kroku, wybierz jego „ Zakres ” i zaktualizuj kod, na przykład:

W powyższym kodzie:

• Na początku „ animować ” pozostaje ta sama i usuwana jest z niej tylko druga animacja umieszczona w „ Zakres ' klasa.
• Następnie ustaw pozycję za pomocą przycisku „ pozycja ' I ' szczyt ' nieruchomości.

Po wykonaniu powyższego fragmentu kodu strona internetowa wygląda teraz tak:

Wynik pokazuje, że obie animacje zostały zastosowane do wybranego elementu HTML w tym samym czasie.

Wniosek

Aby zastosować wiele właściwości CSS, otocz element elementami HTML i zastosuj do nich animacje, tak aby każdy element HTML zawierał pojedynczą animację. Ponieważ właściwość potomna dziedziczy animację zastosowaną w nadrzędnym elemencie HTML, wiele animacji jest stosowanych bez powodowania błędów lub niejasności dla kompilatora. Jest to procedura odtwarzania/dodawania więcej niż jednej animacji CSS w tym samym czasie.