BetaCodophile is currently in active development. Features may change rapidly! 🚀
Codophile LogoCodophile
Back to CSS

Transitions

Control the speed, curve, and delay of state changes.

Timing & Duration

0.5s
0s

Timing Function (Easing)

Target Properties

Choose 'all' to animate everything, or pick a specific property to isolate the effect.

State: Inactive (A)
Click anywhere to toggle
CSS Output
.transition-element {
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
/* changes to animate */
/* ... new styles (e.g. :hover) ... */
}