/* Move line */
@-webkit-keyframes moveLine {
    0% { left: 100%; }
    100% {left: 0; }
}
@-moz-keyframes moveLine {
    0% { left: 100%; }
    100% { left: 0; }
}
@-o-keyframes moveLine {
    0% { left: 100%; }
    100% { left: 0; }
}
@keyframes moveLine {
    0% { left: 100%; }
    100% { left: 0; }
}

/* Spin */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes spin {
    0% { -o-transform: rotate(0deg); }
    100% { -o-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform:rotate(0deg); }
    100% { transform:rotate(360deg); }
}

/* Show Icon */
@-webkit-keyframes showIcon {
	0% {
    	height: 0;
    	-webkit-transform: skewY(0deg);
    }
    50% {
    	height: 100%;
    }
    100% {
    	height: 100%;
    	-webkit-transform: skewY(-2.5deg);
    }
}
@-moz-keyframes showIcon {
	0% {
    	height: 0;
    	-moz-transform: skewY(0deg);
    }
    50% {
    	height: 100%;
    }
    100% {
    	height: 100%;
    	-moz-transform: skewY(-2.5deg);
    }

}
@-o-keyframes showIcon {
	0% {
    	height: 0;
    	-o-transform: skewY(0deg);
    }
    50% {
    	height: 100%;
    }
    100% {
    	height: 100%;
    	-o-transform: skewY(-2.5deg);
    }
}
@keyframes showIcon {
    0% {
    	height: 0;
    	transform: skewY(0deg);
    }
    50% {
    	transform: skewY(-2.5deg);
    }
    100% {
    	height: 100%;
    	transform: skewY(-2.5deg);
    }
}

/* Hover Icon*/
@-webkit-keyframes hoverIcon {
    0% {
    	height: 100%;
    	-webkit-transform: skewY(-2.5deg);
    	background-color: #fff;
    }
    49% {
    	height: 0;
    	background-color: #fff;
    }
    50%{
    	height: 0;
    	background-color: #08c;
    }
    100% {
    	height: 100%;
    	background-color: #08c;
    	-webkit-transform: skewY(-2.5deg);
    }
}
@-moz-keyframes hoverIcon {
    0% {
    	height: 100%;
    	-moz-transform: skewY(-2.5deg);
    	background-color: #fff;
    }
    49% {
    	height: 0;
    	background-color: #fff;
    }
    50%{
    	height: 0;
    	background-color: #08c;
    }
    100% {
    	height: 100%;
    	background-color: #08c;
    	-moz-transform: skewY(-2.5deg);
    }
}
@-o-keyframes hoverIcon {
    0% {
    	height: 100%;
    	-o-transform: skewY(-2.5deg);
    	background-color: #fff;
    }
    49% {
    	height: 0;
    	background-color: #fff;
    }
    50%{
    	height: 0;
    	background-color: #08c;
    }
    100% {
    	height: 100%;
    	background-color: #08c;
    	-o-transform: skewY(-2.5deg);
    }
}
@keyframes hoverIcon {
    0% {
    	height: 100%;
    	transform: skewY(-2.5deg);
    	background-color: #fff;
    }
    49% {
    	height: 0;
    	background-color: #fff;
    }
    50%{
    	height: 0;
    	background-color: #08c;
    }
    100% {
    	height: 100%;
    	background-color: #08c;
    	transform: skewY(-2.5deg);
    }
}

/* Rocket */
@-webkit-keyframes rocket {
    25% {
    	top: 0;
    	-webkit-transform: rotate(-45deg);
    }
    50% {
    	top: -100%;
    }
    65% {
    	top: 0;
    	-webkit-transform: rotate(-45deg);
    }
    100% {
    	-webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes rocket {
    25% {
        top: 0;
        -moz-transform: rotate(-45deg);
    }
    50% {
        top: -100%;
    }
    65% {
        top: 0;
        -moz-transform: rotate(-45deg);
    }
    100% {
        -moz-transform: rotate(0deg);
    }
}
@-o-keyframes rocket {
    25% {
        top: 0;
        -o-transform: rotate(-45deg);
    }
    50% {
        top: -100%;
    }
    65% {
        top: 0;
        -o-transform: rotate(-45deg);
    }
    100% {
        -o-transform: rotate(0deg);
    }
}
@keyframes rocket {
    25% {
        top: 0;
        transform: rotate(-45deg);
    }
    50% {
        top: -100%;
    }
    65% {
        top: 0;
        transform: rotate(-45deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* FlipX */
@-webkit-keyframes flipX {
    0% { -webkit-transform: perspective(400px) rotateX(0deg); }
    25% { -webkit-transform: perspective(400px) rotateX(90deg); }
    50% { -webkit-transform: perspective(400px) rotateX(180deg); }
    75% { -webkit-transform: perspective(400px) rotateX(270deg); }
    100% { -webkit-transform: perspective(400px) rotateX(360deg); }
}
@-moz-keyframes flipX {
    0% { -moz-transform: perspective(400px) rotateX(0deg); }
    25% { -moz-transform: perspective(400px) rotateX(90deg); }
    50% { -moz-transform: perspective(400px) rotateX(180deg); }
    75% { -moz-transform: perspective(400px) rotateX(270deg); }
    100% { -moz-transform: perspective(400px) rotateX(360deg); }
}
@-o-keyframes flipX {
    0% { -o-transform: perspective(400px) rotateX(0deg); }
    25% { -o-transform: perspective(400px) rotateX(90deg); }
    50% { -o-transform: perspective(400px) rotateX(180deg); }
    75% { -o-transform: perspective(400px) rotateX(270deg); }
    100% { -o-transform: perspective(400px) rotateX(360deg); }
}
@keyframes flipX {
    0% { transform: perspective(400px) rotateX(0deg); }
    25% { transform: perspective(400px) rotateX(90deg); }
    50% { transform: perspective(400px) rotateX(180deg); }
    75% { transform: perspective(400px) rotateX(270deg); }
    100% { transform: perspective(400px) rotateX(360deg); }
}

/* Scale */
@-webkit-keyframes scale {
    50% { -webkit-transform: scale(1.2); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes scale {
    50% { -moz-transform: scale(1.2); }
    100% { -moz-transform: scale(1); }
}
@-o-keyframes scale {
    50% { -o-transform: scale(1.2); }
    100% { -o-transform: scale(1); }
}
@keyframes scale {
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Swing */
@-webkit-keyframes swing {
    25% { -webkit-transform: rotate(-15deg); }
    75% { -webkit-transform: rotate(15deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes swing {
    25% { -moz-transform: rotate(-15deg); }
    75% { -moz-transform: rotate(15deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes swing {
    25% { -o-transform: rotate(-15deg); }
    75% { -o-transform: rotate(15deg); }
    100% { -o-transform: rotate(0deg); }
}
@keyframes swing {
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
    100% { transform: rotate(0deg); }
}

/* Right-left */
@-webkit-keyframes rightLeft {
    50% { margin-left: 100px; }
    100% { margin-left: 0; }
}
@-moz-keyframes rightLeft {
    50% { margin-left: 100px; }
    100% { margin-left: 0; }
}
@-o-keyframes rightLeft {
    50% { margin-left: 100px; }
    100% { margin-left: 0; }
}
@keyframes rightLeft {
    50% { margin-left: 100px; }
    100% { margin-left: 0; }
}