70 lines
1.1 KiB
SCSS
70 lines
1.1 KiB
SCSS
/* Animation Mixins */
|
|
@keyframes dropdownAnimation {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(0, -30px, 0);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
transform: translate3d(0, 0px, 0);
|
|
}
|
|
}
|
|
|
|
.dropdownAnimation {
|
|
animation-name: dropdownAnimation;
|
|
@include animation-duration($action-transition-duration);
|
|
@include animation-fill-mode(both);
|
|
}
|
|
@mixin transition($settings) {
|
|
-webkit-transition: $settings;
|
|
-moz-transition: $settings;
|
|
-ms-transition: $settings;
|
|
-o-transition: $settings;
|
|
transition: $settings;
|
|
}
|
|
@keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.fadeOut {
|
|
animation-name: fadeOut;
|
|
}
|
|
|
|
.infinite-spin {
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
animation-name: spin;
|
|
animation-duration: 3s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.fadeInUp {
|
|
animation-name: fadeInUp;
|
|
} |