Generátor přechodů CSS3

Plynulý přechod neprůhlednosti

Oblíbené předvolby

Efekt zeslabení Hladký

přechod

Efekt

Změnit velikost prvku při najetí myší

Efekt

Otočit prvek při najetí myší

Efekt snímku

Přesunutí polohy

Změna barvy

Přechod

O přechodech Přechody

CSS umožňují plynule měnit hodnoty vlastností po určitou dobu.

Mezi běžně animované vlastnosti patří:

  • šířka, výška
  • okraje, odsazení
  • krytí, barva
  • transform (scale, rotate, translate)
  • background-color

Pro Tip: Použijte možnost 'Všechny vlastnosti' k animaci všech změn.

Preview

HOVER ME

Vygenerovaný přechod kódu

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

ovládá

300
0

Efekty

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

Related Tools