style.css

body{
	margin: 0; padding: 0;
}
.wrapper { 
	width:300px; 
	height: 250px;
	position:relative;
	cursor: pointer;
}




/***  GAME-BOX   ***/
.banner{
	position: absolute;   
}

.box{
	position: relative;
	margin-top: -250px;
	-webkit-animation-name:box-show; 
	-webkit-animation-duration:1s; 
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay:1s;
	-webkit-animation-fill-mode: forwards;
	
	animation-name:box-show;
	animation-duration:1s;
	animation-iteration-count:1;
	animation-delay:1s;
	animation-fill-mode: forwards; 
}

@-webkit-keyframes box-show{
	0% {-webkit-transform: translateY(0);} 
	100% {-webkit-transform: translateY(240px);}
}

@keyframes box-show{
	0% {transform: translateY(0);} 
	100% {transform: translateY(240px);}
}
/*** END ***/


/***   LIGHT UNDER THE GAME-BOX  ***/
.light{ 
	visibility: hidden;
    opacity: 0;
	-webkit-animation-duration: 0.3s;
    -webkit-animation-name: light-show;
	-webkit-animation-delay:1.5s;
	-webkit-animation-fill-mode: forwards; 

	animation-duration: 0.3s;
    animation-name: light-show;
	animation-delay:1.5s;
	animation-fill-mode: forwards; 
}


@-webkit-keyframes light-show{
	0% {
        visibility:hidden; 
        opacity: 0;
    }

    1% {
        visibility: visible; 
        opacity: 0;
    }

    100% {
        visibility: visible; 
        opacity: 1;
    }
}
@keyframes light-show{
	0% {
        visibility:hidden; 
        opacity: 0;
    }

    1% {
        visibility: visible; 
        opacity: 0;
    }

    100% {
        visibility: visible; 
        opacity: 1;
    }
}
/*** END ***/
 

/*** FOOTER WRAPPER ***/
.footerWrapper{
	position: absolute;
	height: 27px;
	margin-top: 200px;
	width: 300px;
}
.game-station{
	float: right; 
}

.ubisoft{
	position: relative;
	margin-left: -300px;
	visibility: hidden;
	-webkit-animation-name:psF_slide_right; 
	-webkit-animation-duration:1s; 
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay:1.7s;
	-webkit-animation-fill-mode: forwards;

	animation-name:psF_slide_right; 
	animation-duration:1s; 
	animation-iteration-count:1;
	animation-delay:1.7s;
	animation-fill-mode: forwards;

	margin:0 17px;
}
.ps3{
	position: relative;
	margin-left: -300px;
	visibility: hidden;
	-webkit-animation-name:psF_slide_right; 
	-webkit-animation-duration:1s; 
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay:2s;
	-webkit-animation-fill-mode: forwards;


	animation-name:psF_slide_right; 
	animation-duration:1s; 
	animation-iteration-count:1;
	animation-delay:2s;
	animation-fill-mode: forwards; 

	margin-left:15px; 
}

.ps4{
	position: relative;
	margin-left: -300px;
	visibility: hidden;
	-webkit-animation-name:psF_slide_right; 
	-webkit-animation-duration:1s; 
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay:2.3s;
	-webkit-animation-fill-mode: forwards; 

	animation-name:psF_slide_right; 
	animation-duration:1s; 
	animation-iteration-count:1;
	animation-delay:2.3s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes psF_slide_right{
	0% {-webkit-transform: translateX(-300px);}
	1% {visibility: visible;}
	100% {
		-webkit-transform: translateX(0);
		visibility: visible;
	}
}

@keyframes psF_slide_right{
	0% {-webkit-transform: translateX(-300px);}
	1% {visibility: visible;}
	100% {
		-webkit-transform: translateX(0);
		visibility: visible;
	}
}
/*** END ***/ 


/*** TEXTS ***/
.text1{
	position: absolute;
	color: #fff;
	font-family: Verdana, Geneva, sans-serif;
	/* font-family: Arial, Helvetica, sans-serif; */
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0;
	left:150px;
	top:55px; 


	-webkit-animation-name: text1; 
	-webkit-animation-duration:1s; 
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay:3s;
	-webkit-animation-fill-mode: forwards; 

	animation-name: text1; 
	animation-duration:1s; 
	animation-iteration-count:1;
	animation-delay:3s;
	animation-fill-mode: forwards; 
}


@-webkit-keyframes text1{
	0% {font-size: 0;}
	1% {visibility: visible;}
	100% {font-size: 17px;}
}
@keyframes text1{
	0% {font-size: 0;}
	1% {visibility: visible;}
	100% {font-size: 17px;}
}


.text2{
	position: absolute;
	color: #fff;
	font-family: Verdana, Geneva, sans-serif;
	/* font-family: Arial, Helvetica, sans-serif; */
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	font-size:0;
	left:145px;
	top:68px; 

 
	-webkit-animation-name: text2; 
	-webkit-animation-duration:1s; 
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay:3.5s;
	-webkit-animation-fill-mode: forwards; 

	animation-name: text2; 
	animation-duration:1s; 
	animation-iteration-count:1;
	animation-delay:3.5s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes text2{
	0% {font-size: 0;}
	1% {visibility: visible;}
	100% {font-size: 50px;}
}
@keyframes text2{
	0% {font-size: 0;}
	1% {visibility: visible;}
	100% {font-size: 50px;}
}


.text3{
	position: absolute;
	color: #fff;
	font-family: Verdana, Geneva, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase; 
	font-size: 0;
	left:150px;
	top:125px; 

 
	-webkit-animation-name: text3; 
	-webkit-animation-duration:1s; 
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay:4s;
	-webkit-animation-fill-mode: forwards;

	animation-name: text3; 
	animation-duration:1s; 
	animation-iteration-count:1;
	animation-delay:4s;
	animation-fill-mode: forwards; 
 
}


@-webkit-keyframes text3{
	0% {font-size: 0;}
	1% {visibility: visible;}
	100% {font-size: 12px;}
}
@keyframes text3{
	0% {font-size: 0;}
	1% {visibility: visible;}
	100% {font-size: 12px;}
}
/*** END ***/ 


/***  BUTTON   ***/
.btn{
	position: absolute;
	width: 130px;
	height: 18px;
	padding-top: 7px;
	background-color: #ff0000;
	font-size: 10px;
	color: #fff;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	top:165px;
	left:150px; 
	margin-left: 165px;

	-webkit-animation-name: btn; 
	-webkit-animation-duration:1s; 
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay:4.5s;
	-webkit-animation-fill-mode: forwards; 

	animation-name: btn; 
	animation-duration:1s; 
	animation-iteration-count:1;
	animation-delay:4.5s;
	animation-fill-mode: forwards; 
}
 
@-webkit-keyframes btn{
	0% {margin-left: 165px;}
	1% {visibility: visible;}
	100% {margin-left: 0;}
}
@keyframes btn{
	0% {margin-left: 165px;}
	1% {visibility: visible;}
	100% {margin-left: 0;}
}
/*** END ***/ 

.overlay{
	left:-300px;
}
.wrapper:hover .overlay{
	position: absolute;
	left:0;
	width: 300px;
	height: 250px;
	background-color: #000;
	opacity: 0.7;
	top: 0;
}
.wrapper:hover .square{
	position: absolute;
	width: 50px;
	height: 50px;
	border: 2px solid #fff;
	top: 100px;
	left: 110px;
	display: block;

	-webkit-animation-name: square; 
	-webkit-animation-duration:3s; 
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay:0s;
	-webkit-animation-fill-mode: forwards; 

	animation-name: square; 
	animation-duration:3s; 
	animation-iteration-count:1;
	animation-delay:0s;
	animation-fill-mode: forwards;
}



@-webkit-keyframes square{
 
	0%{
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}
	25% {
		-webkit-border-top-left-radius: 50px;
		-moz-border-radius-topleft: 50px;
		border-top-left-radius: 50px;
	}
	50% {
		-webkit-border-top-left-radius: 50px;
		-webkit-border-bottom-right-radius: 50px;
		-moz-border-radius-topleft: 50px;
		-moz-border-radius-bottomright: 50px;
		border-top-left-radius: 50px;
		border-bottom-right-radius: 50px;
	}
	75% {
		-webkit-border-radius: 50px;
		-webkit-border-top-right-radius: 0;
		-moz-border-radius: 50px;
		-moz-border-radius-topright: 0;
		border-radius: 50px;
		border-top-right-radius: 0;
	}
	100% {
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		border-radius: 50px;
	}
}

@keyframes square{
 
	0%{
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}
	25% {
		-webkit-border-top-left-radius: 50px;
		-moz-border-radius-topleft: 50px;
		border-top-left-radius: 50px;
	}
	50% {
		-webkit-border-top-left-radius: 50px;
		-webkit-border-bottom-right-radius: 50px;
		-moz-border-radius-topleft: 50px;
		-moz-border-radius-bottomright: 50px;
		border-top-left-radius: 50px;
		border-bottom-right-radius: 50px;
	}
	75% {
		-webkit-border-radius: 50px;
		-webkit-border-top-right-radius: 0;
		-moz-border-radius: 50px;
		-moz-border-radius-topright: 0;
		border-radius: 50px;
		border-top-right-radius: 0;
	}
	100% {
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		border-radius: 50px;
	}
}


.one, .two, .three{ 
	visibility: hidden;
	position: absolute;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	width: 17px;
	height: 25px;
	border: 2px solid #fff;
	display: block; 
	color: #fff;
	font-size: 20px;
	padding-top: 2px;
	padding-left: 7px;
	margin-left: 10px;
	margin-top: 10px;

} 
.wrapper:hover .one, 
.wrapper:hover .two, 
.wrapper:hover .three{
	
}

.wrapper:hover .one{
	visibility:hidden;
	-webkit-animation-name: numb-slide-top; 
	-webkit-animation-duration:1.5s; 
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay:1s;
	-webkit-animation-fill-mode: forwards; 

	animation-name: numb-slide-top; 
	animation-duration:1.5s; 
	animation-iteration-count:1;
	animation-delay:1s;
	animation-fill-mode: forwards; 
}

@-webkit-keyframes numb-slide-top{
	1% {visibility: visible;}
	90%{color: transparent;}
	100%{
		color: transparent;
		visibility: visible;
		margin-top: -45px; 
	}
}
@keyframes numb-slide-top{
	1% {visibility: visible;}
	90%{color: transparent;}
	100%{
		color: transparent;
		visibility: visible;
		margin-top: -45px; 
	}
}

.wrapper:hover .two{
	visibility:hidden;
	-webkit-animation-name: numb-slide-bottom-left; 
	-webkit-animation-duration:1.5s; 
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay:2s;
	-webkit-animation-fill-mode: forwards; 

	animation-name: numb-slide-bottom-left; 
	animation-duration:1.5s; 
	animation-iteration-count:1;
	animation-delay:2s;
	animation-fill-mode: forwards; 
}

@-webkit-keyframes numb-slide-bottom-left{
	1% {visibility: visible;}
	90%{color: transparent;}
	100%{
		color: transparent;
		visibility: visible;
		margin-top: 45px;
		margin-left: -35px; 
	}
}
@keyframes numb-slide-bottom-left{
	1% {visibility: visible;}
	90%{color: transparent;}
	100%{
		color: transparent;
		visibility: visible;
		margin-top: 45px;
		margin-left: -35px; 
	}
}

.wrapper:hover .three{
	visibility:hidden;
	-webkit-animation-name: numb-slide-bottom-right; 
	-webkit-animation-duration:1.5s; 
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay:3s;
	-webkit-animation-fill-mode: forwards; 

	animation-name: numb-slide-bottom-right; 
	animation-duration:1.5s; 
	animation-iteration-count:1;
	animation-delay:3s;
	animation-fill-mode: forwards; 
}

@-webkit-keyframes numb-slide-bottom-right{
	1% {visibility: visible;}
	90%{color: transparent;}
	100%{
		color: transparent;
		visibility: visible;
		margin-top: 45px;
		margin-left: 50px; 
	}
}
@keyframes numb-slide-bottom-right{
	1% {visibility: visible;}
	90%{color: transparent;}
	100%{
		color: transparent;
		visibility: visible;
		margin-top: 45px;
		margin-left: 50px; 
	}
}