Jak obracać animację w CSS

W Internecie animacja odgrywa kluczową rolę w przyciąganiu użytkowników. Użytkownik częściej interesuje się animowaną witryną niż statyczna. Z użyciem CSS ”animacja„Własność, możemy animować dowolny element. Ta nieruchomość pozwala nam uczynić witrynę bardziej atrakcyjną i elegancką. Stopniowo zmienia style elementów.

W tym podręczniku dowiemy się o rotacji animacji w CSS.

Jak obracać animację w CSS?

Rotacja animacji pozwala elementowi zmienić swój wygląd na okres środkowy. Do rotacji animacji „„animacja„Zastosowana jest właściwość CSS. Możemy zastosować tę właściwość w dowolnym elemencie HTML, takiego jak obraz, SVG, tekst i wiele innych.

Teraz omówimy następujące punkty:

• • właściwość animacji
  • Składnia właściwości animacji
  • Jak wykonać obrotową animację za pomocą CSS?

Jak używać właściwości „animacji” w CSS?

„„animacja„Właściwość umożliwia zmianę stylu elementu z jednego do drugiego. W tym celu określ nazwę animacji, prędkości, liczby animacji i kierunku rotacji zgodnie z następującą składnią.

Składnia

Animacja: animacja-nazwa prędkości iteracja Iteracja;

• • nazwa animacji: Reprezentuje nazwę animacji (wbudowanej lub niestandardowej (za pomocą klatek kluczowych)).
  • prędkość: Służy do zwolnienia i przyspieszenia animacji. Na przykład, "2s”(Przez dwie sekundy).
  • iteracja: Oznacza to, ile razy chcesz, aby Twoja animacja trwała.
  • kierunek: Określa, jak odtworzy animacja, na przykład do przodu, do tyłu lub naprzemiennie.

Po zrozumieniu podstawowej składni właściwości animacji, przejdźmy do praktycznej pracy i zrozumiemy, jak stworzyć obracającą się animację za pomocą CSS.

Przykład: obrotowy obraz HTML obiekt w CSS

W HTML napisz kod elementu, który chcesz obrócić. Tutaj obrócimy ikonę SVG:

Zastosujmy animację rotacji w CSS. Tutaj ".obracać się”Służy do dostępu do klasy przypisanej do wybranego obrazu, do którego chcemy się obrócić w CSS. Następnie ustawimy szerokość obrazu na „100px”I obróć go w 2 sekundy dla nieskończonej liczby razy w liniowym wzorze. Możesz jednak zmienić prędkość, liczbę iteracji i kierunek zgodnie z wyborem:

.obracać się
szerokość: 100px;
Animacja: rotacja 2s nieskończone liniowe;

@KeyFrames służy do definiowania punktu początkowego i końcowego animacji (używając „”z" I "Do" słowa kluczowe). Ponadto podaj nazwę animacji „obrót„Następnie @KeyFrames, do których chcesz animować. Ponieważ chcemy poruszać animację okrągłym, więc użyj „obracać się()„Funkcja właściwości transformacji, w której zaczniemy od„0 stopni”I kończą się na„359 stopni”:

@KeyFrame Rotation
z
Transform: Rotate (0Deg);

Do
Transform: Rotate (359DEG);

Po wdrożeniu kodu CSS przejdź do pliku HTML i uruchom go, aby uzyskać następujący wynik:

Z użyciem „animacja„Własność, z powodzeniem obróciliśmy element w określonym okresie.

Wniosek

Aby utworzyć obrotową animację w CSS, użyj właściwości animacji i ustaw wartość animacji, takiej jak czas trwania, kierunek i prędkość. Ponadto funkcja CSS ROTATE () jest używana do obracania elementu okrągłego w właściwości transformacji. W tym artykule szczegółowo wyjaśniono właściwość animacji, aby obrócić animację na nieskończoną liczbę razy.