Windi CSSTransitions
Transition Property
Utilities for controlling which CSS properties transition.
default
all
colors
opacity
shadow
transform
none
CSS
Customizing
windi.config.js
export default {
theme: {
extend: {
transitionProperty: {
height: 'height',
spacing: 'margin, padding',
},
},
},
}
Transition Duration
Utilities for controlling the duration of CSS transitions.
0
50
75
100
150
200
300
400
500
600
700
1000
CSS
Customizing
windi.config.js
export default {
theme: {
extend: {
transitionDuration: {
zero: '0ms',
long: '2000ms',
},
},
},
}
Transition Timing Function
Utilities for controlling the easing of CSS transitions.
linear
in
out
in-out
CSS
Customizing
windi.config.js
export default {
theme: {
extend: {
transitionTimingFunction: {
'in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
},
},
},
}
Transition Delay
Utilities for controlling the delay of CSS transitions.
0
50
75
100
150
200
300
400
500
600
700
1000
CSS
Customizing
windi.config.js
export default {
theme: {
extend: {
transitionDelay: {
zero: '0ms',
long: '2000ms',
},
},
},
}