udemy-go-web-1/static/admin/scss/mixins/_animation.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;
}