Logo Windi CSS

过渡和动画

过渡属性

用于控制 CSS 过渡属性的工具类。

default
all
colors
opacity
shadow
transform
none
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      transitionProperty: {
        height: 'height',
        spacing: 'margin, padding',
      },
    },
  },
}

过渡持续时间 
用于控制 CSS 过渡持续时间的工具类。
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',
      },
    },
  },
}

过渡计时函数 
用于控制 CSS 过渡缓和的工具类。
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)',
      },
    },
  },
}

过渡延迟 
用于控制 CSS 过渡延迟的工具类。
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',
      },
    },
  },
}