102 lines
1.4 KiB
SCSS
102 lines
1.4 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,-24%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include keyframes(slide-out-down) {
|
|
0% {
|
|
transform: translate(0,0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0,24%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Slide Out Left from Center
|
|
@include keyframes(slide-out-left) {
|
|
0% {
|
|
transform: translate(0,0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(-24%,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Slide out Right from Center
|
|
@include keyframes(slide-out-right) {
|
|
0% {
|
|
transform: translate(0,0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(24%,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include keyframes(slide-in-up) {
|
|
0% {
|
|
transform: translate(0,24%);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include keyframes(slide-in-down) {
|
|
0% {
|
|
transform: translate(0,-24%);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Slide in Left to Center
|
|
@include keyframes(slide-in-left) {
|
|
0% {
|
|
transform: translate(-24%,0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0,0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Slide in Right to Center
|
|
@include keyframes(slide-in-right) {
|
|
0% {
|
|
transform: translate(24%,0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0,0);
|
|
opacity: 1;
|
|
}
|
|
} |