CSS3 Effect: Multi-effect combination

<! DOCTYPE html>

<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
*{
margin:0;
padding:0
}
html,body{
height:100%;
}
. wrap{
width:100%;
height:100%;
position:relative;
Overflow:hidden;
}
. div1,.div2,.div3,.div4,.div5{
width:100%;
height:100%;
Position:absolute;
top:0;
left:0;
Z-index:10;
}
. div1{
Background:repeating-radial-gradient (300px 100px at Center,black 50%,white);
}
. div2{
Background:repeating-radial-gradient (300px 100px at center,red 50%,green);
}
. div3{
Background:repeating-radial-gradient (300px 100px at Center,blue 50%,yellow);
}
. div4{
Background:repeating-radial-gradient (300px 100px at Center,grey 50%,brown);
}
. div5{
Background:repeating-radial-gradient (300px 100px at Center,purple 50%,pink);
}
. total{
Position:absolute;
bottom:10px;
z-index:1000;
right:0;
width:100%;
Text-align:center;
}
. Total a{
position:relative;
Display:inline-block;
width:100px;
height:100px;
border-radius:50%;
Overflow:hidden;
border:10px solid Rgba (255,255,255,0.5);
}
. wrap:target{
z-index:100;
}

#bg1: target{
Animation:div1 1s;
}
@keyframes Div1 {
0%{
Transform:translatex ( -600px);
}
100%{
Transform:translate (0px);
}
}
#bg2: target{
Animation:div2 1s;
}
@keyframes Div2 {
0%{
Transform:translatey ( -500px);
}
100%{
Transform:translatey (0px);
}
}
#bg3: target{
Animation:div3 1s;
}
@keyframes Div3 {
0%{
Transform:scale (0.2);
}
100%{
Transform:scale (1);
}
}
#bg4: target{
Animation:div4 1s;
}
@keyframes Div4 {
0%{
Transform:scale (10);
}
100%{
Transform:scale (1);
}
}
#bg5: target{
Animation:div5 1s;
}
@keyframes DIV5 {
0%{
Transform:scale (0.1) rotate (0deg);
}
100%{
Transform:scale (1) rotate (360deg);
}
}
</style>

<body>
<div class= "Wrap" >
<div class= "Div1" id= "BG1" ></div>
<div class= "Div2" id= "Bg2" ></div>
<div class= "Div3" id= "Bg3" ></div>
<div class= "Div4" id= "Bg4" ></div>
<div class= "div5" id= "Bg5" ></div>
<div class= "Total" >
<a href= "#bg1" ><div class= "Div1" ></div></a>
<a href= "#bg2" ><div class= "Div2" ></div></a>
<a href= "#bg3" ><div class= "Div3" ></div></a>
<a href= "#bg4" ><div class= "Div4" ></div></a>
<a href= "#bg5" ><div class= "DIV5" ></div></a>
</div>
</div>

</body>

CSS3 Effect: Multi-effect combination