/* =-=-=-=-=-=-=-=- 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(50vw, 100vh);
    -moz-transform: translate(50vw, 100vh);
    -ms-transform: translate(50vw, 100vh);
    -o-transform: translate(50vw, 100vh);
    -webkit-transform: translate(50vw, 100vh);
}

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

#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 3s;
    -moz-transition: transform 3s;
    -ms-transition: transform 3s;
    -o-transition: transform 3s;
    -webkit-transition: transform 3s;
}

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

#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(25deg, 15deg);
    -moz-transform: skew(25deg, 15deg);
    -ms-transform: skew(25deg, 15deg);
    -o-transform: skew(25deg, 15deg);
    -webkit-transform: skew(25deg, 15deg);
}