Generator przejść CSS3

Płynne przejście krycia

Popularne ustawienia wstępne

Efekt zanikania

Płynne przejście krycia

Efekt skali

Zmień rozmiar elementu po najechaniu kursorem

Efekt obrotu

Obróć element po najechaniu kursorem

Efekt slajdu

Przesuwanie pozycji elementu

Zmiana koloru

Przejście koloru tła

Informacje o przejściach

Przejścia CSS umożliwiają płynną zmianę wartości właściwości w określonym czasie.

Do najczęściej animowanych właściwości należą:

  • szerokość, wysokość
  • margines, dopełnienie
  • krycie, kolor
  • transform (scale, rotate, translate)
  • background-color

Wskazówka dla profesjonalistów: Użyj opcji "Wszystkie właściwości", aby animować wszystkie zmiany.

Preview

HOVER ME

Wygenerowany kod

.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; }  .element:hover { /* Hover styles will be generated here */ }

Elementy sterujące przejściami

300
0

Efekty najechania kursorem

100%
100%
0px
0px
8px
8px

Related Tools