Generator animacji CSS
Dostosuj ustawienia wstępne ruchu lub klatki kluczowe i odtwórz animację, aby ją sprawdzić. Uzyskaj CSS do użycia na stronie internetowej oraz przykład użycia HTML.
Co możesz zrobić
Dostosuj animację na podstawie ustawienia wstępnego
Wybierz spośród 12 typów, w tym wejść, wyjść i obrotu. Dostosuj czas trwania i powtarzanie do swoich potrzeb.
Edytuj również stany pośrednie
Określ ruch, obrót, skalę i krycie dla każdej klatki kluczowej, a następnie sprawdź wygenerowaną animację.
Uzyskaj CSS i HTML
Skopiuj lub zapisz CSS animacji oraz przykład użycia HTML z tą samą klasą.
Jak korzystać
Wybierz ustawienie wstępne
Wybierz animację i ustaw czas trwania jednego odtworzenia. Wybór innego ustawienia wstępnego zastępuje także wszelkie dostosowane ustawienia.
Dostosuj tylko potrzebne elementy
Otwórz szczegóły odtwarzania lub klatki kluczowe, aby zmienić ruch pośredni, kierunek, powtarzanie i inne ustawienia.
Wygeneruj i odtwórz
Sprawdź animację, wybierając „Generuj CSS i podgląd”. Po zmianie ustawień wygeneruj ją ponownie.
Uzyskaj CSS i HTML
Zastosuj CSS i dodaj klasę toollet-motion do elementu HTML. Użyj przykładu HTML razem z CSS.
Przydatne, gdy chcesz
Utwórz animację wejścia
Użyj ustawienia wstępnego zanikania lub wejścia od dołu, aby dostosować animację wejścia i jej szybkość.
Animacja po interakcji z przyciskiem
Zmień warunek uruchomienia na najechanie kursorem lub fokus klawiatury, aby animacja reagowała na interakcję.
Klatki kluczowe i warunki odtwarzania
Stany pośrednie i czas trwania
Wartość procentowa klatki kluczowej określa jej pozycję w jednym odtworzeniu. W animacji trwającej 1 sekundę pozycja 50% odpowiada 0,5 sekundy. Funkcja łagodzenia określa sposób zmiany wartości między klatkami kluczowymi.
Ruch, obrót i wygląd
Pozycja pozioma lub pionowa określa wielkość przesunięcia względem położenia początkowego. Skala 1 oznacza rozmiar oryginalny; krycie 0 — przezroczystość, a 1 — pełne krycie.
Opóźnienie, powtarzanie i kierunek
Opóźnienie jest dodawane tylko raz przed rozpoczęciem odtwarzania. Dla skończonego odtwarzania łączny czas to opóźnienie + czas jednego odtworzenia × liczba powtórzeń. Tryb naprzemienny przełącza kierunek do przodu i do tyłu.
Stany przed odtwarzaniem i po nim
Wybierz stan wyświetlany podczas opóźnienia i po zakończeniu odtwarzania. Ustawienia odwrócenia i trybu naprzemiennego zmieniają pozycje klatek kluczowych używane na początku i na końcu odtwarzania.
Ustawienia ograniczenia ruchu
Wygenerowany CSS obsługuje ustawienie ograniczenia ruchu na urządzeniu. Zatrzymuje animację i używa stanu końcowego określonego przez skonfigurowany kierunek i liczbę powtórzeń. Przy odtwarzaniu bez końca używa stanu końcowego pierwszego odtworzenia.
Często zadawane pytania
Czy mogę odtworzyć animację tylko raz?
Wyłącz „Powtarzaj animację” i ustaw liczbę powtórzeń na 1. Standardowe ustawienia wstępne zaczynają od 1 odtworzenia, natomiast obrót i unoszenie mają domyślnie włączone ciągłe powtarzanie.
Do którego elementu należy zastosować CSS?
Dodaj klasę toollet-motion do elementu HTML i użyj jej z wygenerowanym CSS. Przykład użycia HTML to fragment elementu button, a nie kompletna samodzielna strona internetowa.
Ile klatek kluczowych mogę utworzyć?
Możesz użyć od 2 do 8 klatek kluczowych, wliczając początek przy 0% i koniec przy 100%. Dodana klatka kluczowa pojawia się w środku najszerszego przedziału. Nie można usunąć początku ani końca; stałe są tylko ich pozycje procentowe.
Podgląd zniknął po zmianie ustawienia.
Wyniki są usuwane po zmianie ustawień, aby zapobiec przypadkowemu użyciu animacji lub kodu z poprzednich ustawień. Wygeneruj ponownie, aby sprawdzić bieżące ustawienia.
Dlaczego podgląd się nie porusza?
Animacja zatrzymuje się, gdy na urządzeniu włączone jest ograniczenie ruchu. W przypadku ustawień najechania i fokusu sprawdź też warunki uruchomienia. Podgląd wstrzymuje się po przejściu do innej karty.
Czy mogę użyć kilku animacji na tej samej stronie?
Wygenerowana klasa i nazwy klatek kluczowych są wspólne. Aby użyć oddzielnych animacji, zmień obie nazwy dla każdej z nich i wprowadź te zmiany w odpowiednim kodzie HTML.
Dane wejściowe i wyniki
- Ustawienia
- 12 ustawień wstępnych, 2–8 klatek kluczowych i czas trwania 0,2–60 sekund.
- Odtwarzanie
- Opóźnienie 0–60 sekund, 1–100 powtórzeń lub powtarzanie bez końca, funkcja łagodzenia, kierunek, stany przed i po odtworzeniu oraz warunki uruchomienia.
- Wynik
- CSS i przykład użycia HTML. Definiowany jest tylko ruch; nie powstaje kompletna strona internetowa ani plik wideo.