/* =============================== 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;
    -moz-transition: transform 5s;
    -ms-transition: transform 5s;
    -o-transition: transform 5s;
    -webkit-transition: transform 5s;
}

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

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

        #transition-three:hover {
            transform: translate(100vw, 100vh);
            -moz-transform: translate(100vw, 100vh);
            -ms-transform: translate(100vw, 100vh);
            -o-transform: translate(100vw, 100vh);
            -webkit-transform: translate(100vw, 100vh);
        }

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

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

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

        #transition-five:hover {
            transform: scale(10);
            -moz-transform: scale(10);
            -ms-transform: scale(10);
            -o-transform: scale(10);
            -webkit-transform: scale(10);
        }

#transition-six {

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

        #transition-six:hover {
            transform: skew(10deg, 20deg);
            -moz-transform: skew(10deg, 20deg);
            -ms-transform: skew(10deg, 20deg);
            -o-transform: skew(10deg, 20deg);
            -webkit-transform: skew(10deg, 20deg);
        }