87 lines
2.0 KiB
SCSS
87 lines
2.0 KiB
SCSS
// ---------------------------------------------------------------------------
|
|
@include keyframes(fadeOut) {
|
|
0% {
|
|
opacity: 1; }
|
|
100% {
|
|
opacity: 0; } }
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
@include keyframes(fadeOutUp) {
|
|
0% {
|
|
@include translateY(0);
|
|
opacity: 1; }
|
|
100% {
|
|
@include translateY(-20px);
|
|
opacity: 0; } }
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
@include keyframes(fadeOutDown) {
|
|
0% {
|
|
@include translateY(0);
|
|
opacity: 1; }
|
|
100% {
|
|
@include translateY(20px);
|
|
opacity: 0; } }
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
@include keyframes(fadeOutRight) {
|
|
0% {
|
|
@include translateX(0);
|
|
opacity: 1; }
|
|
100% {
|
|
@include translateX(20px);
|
|
opacity: 0; } }
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
@include keyframes(fadeOutLeft) {
|
|
0% {
|
|
@include translateX(0);
|
|
opacity: 1; }
|
|
100% {
|
|
@include translateX(-20px);
|
|
opacity: 0; } }
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
@include keyframes(fadeOutUpBig) {
|
|
0% {
|
|
@include translateY(0);
|
|
opacity: 1; }
|
|
100% {
|
|
@include translateY(-2000px);
|
|
opacity: 0; } }
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
@include keyframes(fadeOutDownBig) {
|
|
0% {
|
|
opacity: 1;
|
|
@include translateY(0); }
|
|
100% {
|
|
opacity: 0;
|
|
@include translateY(2000px); } }
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
@include keyframes(fadeOutRightBig) {
|
|
0% {
|
|
opacity: 1;
|
|
@include translateX(0); }
|
|
100% {
|
|
opacity: 0;
|
|
@include translateX(2000px); } }
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
@include keyframes(fadeOutLeftBig) {
|
|
0% {
|
|
opacity: 1;
|
|
@include translateX(0); }
|
|
100% {
|
|
opacity: 0;
|
|
@include translateX(-2000px); } }
|