my_tests/assets/css/ps_lists/components/_animate.scss

.section1-title{
    opacity: 0;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;

    &.is-visible{
        opacity: 1;
        transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -ms-transform: translateY(50px);
        @include mobile{
            transform: translateY(30px);
            -webkit-transform: translateY(30px);
            -moz-transform: translateY(30px);
            -ms-transform: translateY(30px);
        }
    }
}

.section2-title{
    opacity: 0;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;

    &.is-visible{
        opacity: 1;
        transform: translateY(15px);
        -webkit-transform: translateY(15px);
        -moz-transform: translateY(15px);
        -ms-transform: translateY(15px);
        @include mobile{
            transform: translateY(5px);
            -webkit-transform: translateY(5px);
            -moz-transform: translateY(5px);
            -ms-transform: translateY(5px);
        }
    }
}

.section2-content {
    
    .section2-content-img01{
        opacity: 0;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transition: all 400ms ease-in-out;
        -webkit-transition: all 400ms ease-in-out;
        -moz-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;

        &.is-visible{
            opacity: 1;
            transform: translateY(5px);
            -webkit-transform: translateY(5px);
            -moz-transform: translateY(5px);
            -ms-transform: translateY(5px);
            transition-delay: .6s;
            -webkit-transition-delay: .6s;
            -moz-transition-delay: .6s;
            -ms-transition-delay: .6s;
        }
    }

    .section2-content-img02{
        opacity: 0;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transition: all 400ms ease-in-out;
        -webkit-transition: all 400ms ease-in-out;
        -moz-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;

        &.is-visible{
            opacity: 1;
            transform: translateY(5px);
            -webkit-transform: translateY(5px);
            -moz-transform: translateY(5px);
            -ms-transform: translateY(5px);
            transition-delay: 1.2s;
            -webkit-transition-delay: 1.2s;
            -moz-transition-delay: 1.2s;
            -ms-transition-delay: 1.2s;
        }
    }

    .section2-content-img03{
        opacity: 0;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transition: all 400ms ease-in-out;
        -webkit-transition: all 400ms ease-in-out;
        -moz-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;

        &.is-visible{
            opacity: 1;
            transform: translateY(5px);
            -webkit-transform: translateY(5px);
            -moz-transform: translateY(5px);
            -ms-transform: translateY(5px);
            transition-delay: 1.8s;
            -webkit-transition-delay: 1.8s;
            -moz-transition-delay: 1.8s;
            -ms-transition-delay: 1.8s;
        }
    }
}

.section3-title, .section4-title{
    opacity: 0;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -ms-transition: all 600ms ease-in-out;

    &.is-visible{
        opacity: 1;
        transform: translateY(15px);
        -webkit-transform: translateY(15px);
        -moz-transform: translateY(15px);
        -ms-transform: translateY(15px);
        @include desktop{
            transform: translateY(50px);
            -webkit-transform: translateY(50px);
            -moz-transform: translateY(50px);
            -ms-transform: translateY(50px);
        }
        @include pad{
            transform: translateY(10px);
            -webkit-transform: translateY(10px);
            -moz-transform: translateY(10px);
            -ms-transform: translateY(10px);
        }
        @include mobile{
            transform: translateY(5px);
            -webkit-transform: translateY(5px);
            -moz-transform: translateY(5px);
            -ms-transform: translateY(5px);
        }
    }
}

.section5-title{
    opacity: 0;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -ms-transition: all 600ms ease-in-out;

    &.is-visible{
        opacity: 1;
        transform: translateY(15px);
        -webkit-transform: translateY(15px);
        -moz-transform: translateY(15px);
        -ms-transform: translateY(15px);
        @include mobile{
            transform: translateY(5px);
            -webkit-transform: translateY(5px);
            -moz-transform: translateY(5px);
            -ms-transform: translateY(5px);
        }
    }
}

.section5-content{

    .arrow-icon-l{
        opacity: 0;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transition: all 400ms ease-in-out;
        -webkit-transition: all 400ms ease-in-out;
        -moz-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;

        &.is-visible{
            opacity: 1;
            transform: translateX(10px);
            -webkit-transform: translateX(10px);
            -moz-transform: translateX(10px);
            -ms-transform: translateX(10px);
            transition-delay: .6s;
            -webkit-transition-delay: .6s;
            -moz-transition-delay: .6s;
            -ms-transition-delay: .6s;
        }
    }

    .arrow-icon-r{
        opacity: 0;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transition: all 400ms ease-in-out;
        -webkit-transition: all 400ms ease-in-out;
        -moz-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;

        &.is-visible{
            opacity: 1;
            transform: translateX(10px);
            -webkit-transform: translateX(10px);
            -moz-transform: translateX(10px);
            -ms-transform: translateX(10px);
            transition-delay: 1.2s;
            -webkit-transition-delay: 1.2s;
            -moz-transition-delay: 1.2s;
            -ms-transition-delay: 1.2s;
        }
    }
}


.section6-title{
    opacity: 0;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -ms-transition: all 600ms ease-in-out;

    &.is-visible{
        opacity: 1;
        transform: translateY(15px);
        -webkit-transform: translateY(15px);
        -moz-transform: translateY(15px);
        -ms-transform: translateY(15px);
        @include mobile{
            transform: translateY(5px);
            -webkit-transform: translateY(5px);
            -moz-transform: translateY(5px);
            -ms-transform: translateY(5px);
        }
    }
}

.section6-content-wrapper{

    .section6-content{
        opacity: 0;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transition: all 400ms ease-in-out;
        -webkit-transition: all 400ms ease-in-out;
        -moz-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;

        &.is-visible{
            opacity: 1;
            transform: translateX(10px);
            -webkit-transform: translateX(10px);
            -moz-transform: translateX(10px);
            -ms-transform: translateX(10px);
            transition-delay: .6s;
            -webkit-transition-delay: .6s;
            -moz-transition-delay: .6s;
            -ms-transition-delay: .6s;
        }
    }

    .section6-context-up{
        opacity: 0;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transition: all 400ms ease-in-out;
        -webkit-transition: all 400ms ease-in-out;
        -moz-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;

        &.is-visible{
            opacity: 1;
            transform: translateX(10px);
            -webkit-transform: translateX(10px);
            -moz-transform: translateX(10px);
            -ms-transform: translateX(10px);
            transition-delay: 1.2s;
            -webkit-transition-delay: 1.2s;
            -moz-transition-delay: 1.2s;
            -ms-transition-delay: 1.2s;
        }
    }

    .section6-context-down{
        opacity: 0;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transition: all 400ms ease-in-out;
        -webkit-transition: all 400ms ease-in-out;
        -moz-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;

        &.is-visible{
            opacity: 1;
            transform: translateX(10px);
            -webkit-transform: translateX(10px);
            -moz-transform: translateX(10px);
            -ms-transform: translateX(10px);
            transition-delay: 1.7s;
            -webkit-transition-delay: 1.7s;
            -moz-transition-delay: 1.7s;
            -ms-transition-delay: 1.7s;
        }
    }
}

.section7-content{
    .section7-content-bg1{
        background-image: url(../../images/ps_lists/section7_text.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 100%;
        transition: background-image 600ms ease-in-out;
        -webkit-transition: background-image 600ms ease-in-out;
        -moz-transition: background-image 600ms ease-in-out;
        -ms-transition: background-image 600ms ease-in-out;
        transition-delay: .5s;
        -webkit-transition-delay: .5s;
        -moz-transition-delay: .5s;
        -ms-transition-delay: .5s;

        @include xl-desktop{
            background-image: url(../../images/ps_lists/mb/section7_m_text.png);
            background-size: cover;
            background-position: center;
            display: block;
        }
        @include desktop{
            background-image: url(../../images/ps_lists/mb/section7_m_text.png);
            background-size: cover;
            background-position: center;
            display: block;
        }
        @include pad{
            background-image: url(../../images/ps_lists/mb/section7_m_text.png);
            background-size: cover;
            background-position: center;
            display: block;
        }
        @include mobile{
            background-image: url(../../images/ps_lists/mb/section7_m_text.png);
            background-size: cover;
            background-position: center;
            display: block;
        }
    }
    .section7-content-bg2{
        background-image: url(../../images/ps_lists/section7_replace_img.png);
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;

        @include xl-desktop{
            background-image: url(../../images/ps_lists/mb/section7_m_replace_img.png);
            background-size: cover;
            background-position: center;
            display: block;
        }
        @include desktop{
            background-image: url(../../images/ps_lists/mb/section7_m_replace_img.png);
            background-size: cover;
            background-position: center;
            display: block;
        }
        @include pad{
            background-image: url(../../images/ps_lists/mb/section7_m_replace_img.png);
            background-size: cover;
            background-position: center;
            display: block;
        }
        @include mobile{
            background-image: url(../../images/ps_lists/mb/section7_m_replace_img.png);
            background-size: cover;
            background-position: center;
            display: block;
        }
    }
}

@-webkit-keyframes scroll {
    0% { opacity: 0; }
    10% { 
        transform: translateY(0); opacity: 1; 
        -webkit-transform:translateY(0);
    }
    100% { 
        transform: translateY(15px); opacity: 0;
        -webkit-transform:translateY(15px);
    }
}

@keyframes scroll {
    0% { opacity: 0; }
    10% { 
        transform: translateY(0); opacity: 1; 
        -webkit-transform:translateY(0);
    }
    100% { 
        transform: translateY(15px); opacity: 0;
        -webkit-transform:translateY(15px);
    }
}


@-webkit-keyframes move {
    0% { 
        transform: translateY(10px);
        -webkit-transform:translateY(10px);
    }
    10% { 
        transform: translateY(0px);
        -webkit-transform:translateY(0px);
    }
    100% { 
        transform: translateY(10px);
        -webkit-transform:translateY(10px);
    }
}

@keyframes move {
    0% { 
        transform: translateY(10px);
        -webkit-transform:translateY(10px);
    }
    10% { 
        transform: translateY(0px);
        -webkit-transform:translateY(0px);
    }
    100% { 
        transform: translateY(10px);
        -webkit-transform:translateY(10px);
    }
}