131 lines
1.8 KiB
SCSS
131 lines
1.8 KiB
SCSS
// -- Slide Animations -- //
|
|
|
|
// Slide Out Top from Center
|
|
@include keyframes(slide-out-up) {
|
|
0% {
|
|
transform: translate(0,0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0,-12%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include keyframes(slide-out-down) {
|
|
0% {
|
|
transform: translate(0,0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0,12%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Slide Out Left from Center
|
|
@include keyframes(slide-out-left) {
|
|
0% {
|
|
transform: translate(0,0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(-12%,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Slide out Right from Center
|
|
@include keyframes(slide-out-right) {
|
|
0% {
|
|
transform: translate(0,0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(12%,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include keyframes(slide-in-up) {
|
|
0% {
|
|
transform: translate(0,12%);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include keyframes(slide-in-down) {
|
|
0% {
|
|
transform: translate(0,-12%);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Slide in Left to Center
|
|
@include keyframes(slide-in-left) {
|
|
0% {
|
|
transform: translate(-12%,0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Slide in Right to Center
|
|
@include keyframes(slide-in-right) {
|
|
0% {
|
|
transform: translate(12%,0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include keyframes(slide-in-down-2) {
|
|
0% {
|
|
transform: translate(0,-6%);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include keyframes(slide-in-down-3) {
|
|
0% {
|
|
transform: translate(0,-2%);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include keyframes(fade-in) {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
} |