$bg_color: #ffffff;
$font_color: #ffffff;
$link_color: #0000ff;
$link_hover_color: #aaa;

body {
    background-color: $bg_color;
    color: $font_color;
    text-align: center;
    a, a:visited {
        color: $link_color;
        text-decoration: none;
    }
    a:hover {
        color: $link_hover_color;
    }
}

.fade-wrapper {
    position: relative;
    width: 480px;
    margin: auto;
}

.fade-text {
    display: block;
    color: transparent;
    font-size: 30px;
    line-height: 1.4;
    margin-bottom: 0px;
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 300% 300%;
    &.to__right {
        background-image: linear-gradient( to right, #fff 30%, rgba(255, 255, 255, 0) 50% );
        background-position: left 100% center;
        transform: translate(-20px, 0);
        animation: toRight var(--duration, 2.4s) var(--ease) var(--delay, 0.6s) forwards;
    }
    &.to__left {
        background-image: linear-gradient( to left, #fff 30%, rgba(255, 255, 255, 0) 50% );
        background-position: right 100% center;
        transform: translate(20px, 0);
        animation: toLeft var(--duration, 2.4s) var(--ease) var(--delay, 0.6s) forwards;
    }
    &.to__top {
        background-image: linear-gradient( to top, #fff 30%, rgba(255, 255, 255, 0) 50% );
        background-position: center 0;
        transform: translate(0, 20px);
        animation: toTop var(--duration, 2.4s) var(--ease) var(--delay, 0.6s) forwards;
    }
    &.to__bottom {
        background-image: linear-gradient( to bottom, #ffffff 30%, rgba(255, 255, 255, 0) 50% );
        background-position: center 100%;
        transform: translate(0, -20px);
        animation: toBottom var(--duration, 2.4s) var(--ease) var(--delay, 0.6s) forwards;
    }
}
@keyframes toRight {
    100% {
        transform: translate(0, 0);
        background-position: left 0% center;
    }
}
@keyframes toLeft {
    100% {
        transform: translate(0, 0);
        background-position: right 0% center;
    }
}
@keyframes toBottom {
    100% {
        transform: translate(0, 0);
        background-position: center 0%;
    }
}
@keyframes toTop {
    100% {
        transform: translate(0, 0);
        background-position: center 100%;
    }
}