CSS Transition Generator

Configure CSS transitions with hover preview.

Przejscie 1

wlasciwosc

czas trwania

funkcja-czasu

opoznienie

Podglad na zywo — najedz na pole

Najedz na mnie

Wygenerowany CSS

.element {
  transition: all 0.3s ease 0s;
}

.element:hover {
  /* apply your hover styles here */
}

O tym narzędziu

Generator Przejsc CSS umozliwia skonfigurowanie skrotu transition poprzez ustawienie wlasciwosci docelowej, czasu trwania, funkcji czasu i opoznienia. Interaktywny podglad pokazuje zachowanie przed skopiowaniem kodu.

Przejscia CSS tworza plaskie zmiany stanu miedzy dwiema wartosciami CSS, wyzwalane przez pseudoklasy takie jak :hover, :focus lub zmiany klas przez JavaScript.

Jak używać

Wybierz wlasciwosc CSS do animowania (lub uzyj all).
Ustaw czas trwania — jak dlugo trwa przejscie (np. 0.3s).
Wybierz funkcje czasu do kontroli krzywej przyspieszenia.
Opcjonalnie dodaj opoznienie przed rozpoczeciem przejscia.
Najedz na pole podgladu, aby zobaczyc efekt na zywo, a nastepnie skopiuj CSS.

Przypadki użycia

Programisci uzywaja przejsc do efektow hover przyciskow, powiekszania kart i plynnych zmian kolorow w linkach nawigacyjnych. Projektanci formularzy uzywaja ich do stylow fokusu pola.

Często zadawane pytania

Jaka jest roznica miedzy transition a animation? — Przejscia reaguja na zmiane stanu (np. hover); animacje uruchamiaja sie automatycznie lub w petli przy uzyciu klatek kluczowych.
Czy moge animowac wiele wlasciwosci? — Tak. Kliknij "Dodaj przejscie", aby dodac wiele regul wlasciwosci oddzielonych przecinkami.
Ktore wlasciwosci mozna animowac? — Wiekszosc wlasciwosci o wartosciach liczbowych: opacity, color, transform, wymiary itp. Wlasciwosci takie jak display nie moga byc animowane.