barryallstar123

catch the shapes

body{
}

#canvas{
 position:relative;
 width:90%;
 height:500px;
 background-color:tan;
 display:block;
 margin:0 auto;
cursor:crosshair;
 -webkit-animation-name: bggg;
animation-name:bggg;
-webkit-animation-duration: 2s;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@-webkit-keyframes bggg {
}
@keyframes bggg {
0% {background-color:red; }
25% {background-color:yellow; }
50% {background-color:pink; }
75% {background-color:blue; }
100% {background-color:black;}
}

#circle{
 position:relative;
 width:20px;
 height:20px;
 border-radius:100%;
 -webkit-animation-name: animatecircle;
animation-name:animatecircle;
-webkit-animation-duration: 1s;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#circle:hover{
 background-color:red;
}

@-webkit-keyframes animatecircle {
}
@keyframes animatecircle {
0% {background-color:orange; left:0px; top:0px;}
25% {background-color:yellow; left:20%; top:90%; width:60px; height:60px;}
50% {background-color:pink; left:50%; top:0; border-radius:10%; border:solid #000 5px; width:20px; height:20px;}
75% {background-color:blue; left:70%; top:90%; width:60px; height:60px;}
100% {background-color:black; left:90%; top:0;}
}
#circletwo{
 position:relative;
 width:20px;
 height:20px;
 border-radius:100%;
 -webkit-animation-name: animatecircletwo;
animation-name:animatecircletwo;
-webkit-animation-duration: 2s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#circletwo:hover{
 background-color:#666;
}

@-webkit-keyframes animatecircletwo {
}
@keyframes animatecircletwo {
0% {background-color:orange; left:90%; top:90%;}
25% {background-color:red; left:20%; top:0; width:60px; height:60px;}
50% {background-color:pink; left:50%; top:90%; border-radius:10%; border:solid #000 5px; width:20px; height:20px;}
75% {background-color:blue; left:20%; top:0%; width:60px; height:60px;}
100% {background-color:black; left:0; top:90%;}
}