/*==-=-=-=--=-=-= CSS Transitions =-=-=-=-=-=-=---= */

#transition-one{
    transition: transform 5s;
    -moz-transition: transform 5s;
    -ms-transition: transform 5s;
    -o-transition: transform 5s;
    -webkit-transition: transform 5s;
}

    #transition-one:hover{
        transform: translateX(100vw);
        -moz-transform: translateX(100vw);
        -ms-transform: translateX(100vw);
        -o-transform: translateX(100vw);
        -webkit-transform: translateX(100vw);
    }

    #transition-two{
        transition: transform 5s;
    }

    #transition-two:hover{
        transform: translateY(100vh);
        -moz-transform: translateY(100vh);
        -o-transform: translateY(100vh);
        -ms-transform: translateY(100vh);
        -webkit-transform: translateY(100vh);
    }


#transition-three{
    translate: transform 10s;
}

    #transition-three:hover{
        transform: translate(10vh, 10vw);
    }


#transition-four{
    transition: transform 5s;
}

#transition-four:hover{
    transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

#transition-five{
    transition: transform 2s;
}

    #transition-five:hover{
        transform: scale(5)
    }

#transition-six{
    transition: transform 5s;
}

    #transition-six:hover{
        transform: skew(15deg, 20deg);
    }