<body>
<div class="wrapper">
<div class="hoop"></div>
<div class="sphere1"></div>
<div class="sphere2"></div>
</div>
</body>/*sphere1 movement*/
@-webkit-keyframes sphere1Move {
0% {width:50px; height:50px;left:116px;top:116px;z-index: 0;}
10% {width:40px;height:40px;}
20% {width:30px;height:30px;}
30% {width:40px;height:40px;}
45%{left:15px;}
49%{z-index: 0;}
50% {width:50px; height:50px;left:20px;top:116px;z-index:10;}
/*55%{left:15px;}*/
60%{width:60px;height:60px;}
80% {width:70px;height:70px;}
90%{width:60px;height:60px;}
99% {z-index: 10;}
100% {width:50px; height:50px; left:116px;top:116px;z-index: 0;}
}
@keyframes sphere1Move {
0% {width:50px; height:50px;left:116px;top:116px;z-index: 0;}
10% {width:40px;height:40px;}
20% {width:30px;height:30px;}
30% {width:40px;height:40px;}
45%{left:15px;}
49%{z-index: 0;}
50% {width:50px; height:50px;left:20px;top:116px;z-index:10;}
/* 55%{left:15px;}*/
60%{width:60px;height:60px;}
80% {width:70px;height:70px;}
90%{width:60px;height:60px;}
99% {z-index: 10;}
100% {width:50px; height:50px; left:116px;top:116px;z-index: 0;}
}
/*sphere2 movement*/
@-webkit-keyframes sphere2Move {
0% {width:50px; height:50px;left:116px;top:116px;z-index: 0;}
10% {width:40px;height:40px;}
20% {width:30px;height:30px;}
30% {width:40px;height:40px;}
45%{left:217px;}
49%{z-index: 0;}
50% {width:50px; height:50px;left:222px;top:116px;z-index:10;}
/*55%{left:15px;}*/
60%{width:60px;height:60px;}
80% {width:70px;height:70px;}
90%{width:60px;height:60px;}
99% {z-index: 10;}
100% {width:50px; height:50px; left:116px;top:116px;z-index: 0;}
}
@keyframes sphere2Move {
0% {width:50px; height:50px;left:116px;top:116px;z-index: 0;}
10% {width:40px;height:40px;}
20% {width:30px;height:30px;}
30% {width:40px;height:40px;}
45%{left:217px;}
49%{z-index: 0;}
50% {width:50px; height:50px;left:222px;top:116px;z-index:10;}
/*55%{left:15px;}*/
60%{width:60px;height:60px;}
80% {width:70px;height:70px;}
90%{width:60px;height:60px;}
99% {z-index: 10;}
100% {width:50px; height:50px; left:116px;top:116px;z-index: 0;}
}
body {
background-color: #34495E;
}
.wrapper {
width:300px;
height:300px;
/*border:1px solid red;*/
margin:0 auto;
margin-top: 5%;
position: relative;
}
.hoop {
width:80px;
height:80px;
border-radius: 50%;
background: transparent;
box-shadow: 0 0 0 6px #96281B, 0 0 0 26px #D64541;
position: absolute;
left:100px;
top:100px;
z-index:5;
}
.sphere1 {
width:50px;
height:50px;
border-radius: 50%;
background: #22A7F0;
position: absolute;
left:116px;
top:116px;
box-shadow:-7px -7px 0 #1E8BC3 inset;
-webkit-animation: sphere1Move 1.2s linear infinite;
animation: sphere1Move 1.2s linear infinite;
}
.sphere2 {
width:50px;
height:50px;
border-radius: 50%;
background: #22A7F0;
position: absolute;
left:116px;
top:116px;
box-shadow:-7px -7px 0 #1E8BC3 inset;
-webkit-animation: sphere2Move 1.2s linear 0.6s infinite;
animation: sphere2Move 1.2s linear 0.6s infinite;
}
External CSS
This Pen doesn't use any external CSS resources.