Logo Windi CSS

Переходы и анимация

Свойство перехода

Утилиты для управления переходом свойств CSS.

default
all
colors
opacity
shadow
transform
none
CSS
.transition {
  -webkit-transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, filter, backdrop-filter;
  -o-transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, -webkit-box-shadow, transform, -webkit-transform, filter, backdrop-filter;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  transition-duration: 150ms;
}
Персонализация
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
.duration-150 {
  -webkit-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  transition-duration: 150ms;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      transitionDuration: {
        zero: '0ms',
        long: '2000ms',
      },
    },
  },
}

Функция времени перехода

Утилиты для управления плавностью переходов CSS.

linear
in
out
in-out
CSS
.ease-linear {
  -webkit-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
}
Персонализация
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
.delay-150 {
  -webkit-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  transition-delay: 150ms;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      transitionDelay: {
        zero: '0ms',
        long: '2000ms',
      },
    },
  },
}