mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-09 01:18:50 +00:00
106 lines
2.7 KiB
SCSS
106 lines
2.7 KiB
SCSS
@charset "UTF-8";
|
|
|
|
// animate mixins
|
|
// --------------------------------------------------
|
|
|
|
@mixin count($count: 1) {
|
|
-webkit-animation-iteration-count: $count;
|
|
-moz-animation-iteration-count: $count;
|
|
-ms-animation-iteration-count: $count;
|
|
-o-animation-iteration-count: $count;
|
|
animation-iteration-count: $count;
|
|
}
|
|
|
|
@mixin duration($duration: 1s) {
|
|
-webkit-animation-duration: $duration;
|
|
-moz-animation-duration: $duration;
|
|
-ms-animation-duration: $duration;
|
|
-o-animation-duration: $duration;
|
|
animation-duration: $duration;
|
|
}
|
|
|
|
@mixin delay($delay: .2s) {
|
|
-webkit-animation-delay: $delay;
|
|
-moz-animation-delay: $delay;
|
|
-ms-animation-delay: $delay;
|
|
-o-animation-delay: $delay;
|
|
animation-delay: $delay;
|
|
}
|
|
|
|
@mixin function($function: ease) {
|
|
-webkit-animation-timing-function: $function;
|
|
-moz-animation-timing-function: $function;
|
|
-ms-animation-timing-function: $function;
|
|
-o-animation-timing-function: $function;
|
|
animation-timing-function: $function;
|
|
}
|
|
|
|
@mixin fill-mode($fill: both) {
|
|
-webkit-animation-fill-mode: $fill;
|
|
-moz-animation-fill-mode: $fill;
|
|
-ms-animation-fill-mode: $fill;
|
|
-o-animation-fill-mode: $fill;
|
|
animation-fill-mode: $fill;
|
|
}
|
|
|
|
@mixin visibility($visibility: hidden) {
|
|
-webkit-backface-visibility: $visibility;
|
|
-moz-backface-visibility: $visibility;
|
|
-ms-backface-visibility: $visibility;
|
|
-o-backface-visibility: $visibility;
|
|
backface-visibility: $visibility;
|
|
}
|
|
|
|
@mixin transform($property) {
|
|
-webkit-transform: $property;
|
|
-moz-transform: $property;
|
|
-ms-transform: $property;
|
|
-o-transform: $property;
|
|
transform: $property;
|
|
}
|
|
|
|
@mixin transform-origin($transform-origin: center center) {
|
|
-webkit-transform-origin: $transform-origin;
|
|
-moz-transform-origin: $transform-origin;
|
|
-ms-transform-origin: $transform-origin;
|
|
-o-transform-origin: $transform-origin;
|
|
transform-origin: $transform-origin;
|
|
}
|
|
|
|
@mixin transform-style($transform-style: flat) {
|
|
-webkit-transform-style: $transform-style;
|
|
-moz-transform-style: $transform-style;
|
|
-o-transform-style: $transform-style;
|
|
transform-style: $transform-style;
|
|
}
|
|
|
|
@mixin animation-name($animation-name) {
|
|
-webkit-animation-name: $animation-name;
|
|
-moz-animation-name: $animation-name;
|
|
-ms-animation-name: $animation-name;
|
|
-o-animation-name: $animation-name;
|
|
animation-name: $animation-name;
|
|
}
|
|
|
|
@mixin keyframes($animation-name) {
|
|
@-webkit-keyframes #{$animation-name} {
|
|
@content;
|
|
}
|
|
|
|
@-moz-keyframes #{$animation-name} {
|
|
@content;
|
|
}
|
|
|
|
@-ms-keyframes #{$animation-name} {
|
|
@content;
|
|
}
|
|
|
|
@-o-keyframes #{$animation-name} {
|
|
@content;
|
|
}
|
|
|
|
@keyframes #{$animation-name} {
|
|
@content;
|
|
}
|
|
}
|