257 lines
4.8 KiB
SCSS
257 lines
4.8 KiB
SCSS
@keyframes fadein {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeout {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes scalein {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scaleY(0.8);
|
|
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slidedown {
|
|
0% {
|
|
max-height: 0;
|
|
}
|
|
100% {
|
|
max-height: auto;
|
|
}
|
|
}
|
|
|
|
@keyframes slideup {
|
|
0% {
|
|
max-height: 1000px;
|
|
}
|
|
100% {
|
|
max-height: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeinleft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-100%);
|
|
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeoutleft {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0%);
|
|
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeinright {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeoutright {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0%);
|
|
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeinup {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-100%);
|
|
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeoutup {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0%);
|
|
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-100%);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeindown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeoutdown {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0%);
|
|
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes animate-width {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.fadein {
|
|
animation: fadein .15s linear;
|
|
}
|
|
|
|
.fadeout {
|
|
animation: fadeout .15s linear;
|
|
}
|
|
|
|
.slidedown {
|
|
animation: slidedown .45s ease-in-out;
|
|
}
|
|
|
|
.slideup {
|
|
animation: slideup .45s cubic-bezier(0, 1, 0, 1);
|
|
}
|
|
|
|
.scalein {
|
|
animation: scalein .15s linear;
|
|
}
|
|
|
|
.fadeinleft {
|
|
animation: fadeinleft .15s linear;
|
|
}
|
|
|
|
.fadeoutleft {
|
|
animation: fadeoutleft .15s linear;
|
|
}
|
|
|
|
.fadeinright {
|
|
animation: fadeinright .15s linear;
|
|
}
|
|
|
|
.fadeoutright {
|
|
animation: fadeoutright .15s linear;
|
|
}
|
|
|
|
.fadeinup {
|
|
animation: fadeinup .15s linear;
|
|
}
|
|
|
|
.fadeoutup {
|
|
animation: fadeoutup .15s linear;
|
|
}
|
|
|
|
.fadeindown {
|
|
animation: fadeindown .15s linear;
|
|
}
|
|
|
|
.fadeoutdown {
|
|
animation: fadeoutdown .15s linear;
|
|
}
|
|
|
|
.animate-width {
|
|
animation: animate-width 1000ms linear;
|
|
}
|
|
|
|
$animation-duration-props: (
|
|
'animation-duration-100': '100ms',
|
|
'animation-duration-150': '150ms',
|
|
'animation-duration-200': '200ms',
|
|
'animation-duration-300': '300ms',
|
|
'animation-duration-400': '400ms',
|
|
'animation-duration-500': '500ms',
|
|
'animation-duration-1000': '1000ms',
|
|
'animation-duration-2000': '2000ms',
|
|
'animation-duration-3000': '3000ms'
|
|
);
|
|
|
|
$animation-delay-props: (
|
|
'animation-delay-100': '100ms',
|
|
'animation-delay-150': '150ms',
|
|
'animation-delay-200': '200ms',
|
|
'animation-delay-300': '300ms',
|
|
'animation-delay-400': '400ms',
|
|
'animation-delay-500': '500ms',
|
|
'animation-delay-1000': '1000ms'
|
|
);
|
|
|
|
$animation-iteration-props: (
|
|
'animation-iteration-1': '1',
|
|
'animation-iteration-2': '2',
|
|
'animation-iteration-infinite': 'infinite'
|
|
);
|
|
|
|
$animation-timing-props: (
|
|
'animation-linear': 'linear',
|
|
'animation-ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
|
|
'animation-ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
|
|
'animation-ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)'
|
|
);
|
|
|
|
$animation-fill-props: (
|
|
'animation-fill-none': 'none',
|
|
'animation-fill-forwards': 'forwards',
|
|
'animation-fill-backwards': 'backwards',
|
|
'animation-fill-both': 'both'
|
|
);
|
|
|
|
@include style-class('animation-duration', $animation-duration-props);
|
|
@include style-class('animation-delay', $animation-delay-props);
|
|
@include style-class('animation-iteration-count', $animation-iteration-props);
|
|
@include style-class('animation-timing-function', $animation-timing-props);
|
|
@include style-class('animation-fill-mode', $animation-fill-props);
|