Catch the ball (Only CSS)

HTML
<div class="container"> <div class="ball3"></div> <div class="circu"> <div class="gatito"> <div class="cola"><div class="cola3"></div></div> <div class="legs7"></div> <div class="legs9"></div> <div class="cat"></div> <div class="legs"></div> <div class="legs3"></div> <div class="head"> <div class="ore"></div><div class="ore3"></div><div class="head7"><div class="eyes"><div class="iris"></div></div><div class="eyes3"><div class="iris3"></div></div><div class="bocas3"></div><div class="bigotitos"></div><div class="bigotitos3"></div><div class="boqui"></div> <div class="nose"></div></div></div> </div> </div> <div class="ball"></div> </div>
CSS
body{ background:black; } .container{ position:relative; width:800px; height:600px; background:#283144; margin:121px auto; padding-top:30px; } .gatito{ position:absolute; margin:-50px 0; } .circu{ position:relative; width:291px; height:90px; border-radius:100%; background:rgba(255,255,255,.1); margin:390px auto; } .cat{ position:absolute; display:block; width: 149px; height: 162px; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:#ccc; border:1px solid gray; border-top:3px solid gray; margin:-70px 70px; animation:baja9 3s alternate infinite; -moz-animation:baja9 3s alternate infinite; -webkit-animation: baja9 3s alternate infinite; } .head{ position:absolute; margin:3px -5px; animation:baja 3s alternate infinite; -moz-animation:baja 3s alternate infinite; -webkit-animation: baja 3s alternate infinite; } .head7{ position:absolute; display:block; width: 142px; height: 135px; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:#ccc; border:2px solid gray; margin:-192px 75px; } .ore{ position:absolute; width:70px; height:90px; border-radius:50px 500px 50px 500px; background:#94948c; -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); transform: rotate(12deg); margin:-201px 50px; border:7px solid #d9d9d3; animation:sube3 3s alternate infinite; -moz-animation:sube3 3s alternate infinite; -webkit-animation:sube3 3s alternate infinite; } .ore3{ position:absolute; width:70px; height:90px; border-radius:500px 50px 500px 50px; background:#94948c; -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); transform: rotate(-12deg); margin:-201px 158px; border: 7px solid #d9d9d3; animation:sube7 3s alternate infinite; -moz-animation:sube7 3 alternate infinite; -webkit-animation:sube7 3s alternate infinite; } .eyes{ position:absolute; width: 43px; height: 43px; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:white; border:1px solid black; margin:50px 12px; } .iris{ position:absolute; width:30px; height:30px; border-radius:100%; background:black; margin:0px 3px; animation:gira3 1s alternate infinite; -moz-animation:gira3 1s alternate infinite; -webkit-animation:gira3 1s alternate infinite; } iris::before{ content:""; position:absolute; width:7px; height:7px; border-radius:100%; background:white; margin:3px 5px; } .eyes3{ position:absolute; width: 43px; height: 43px; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:white; border:1px solid black; margin:50px 85px; } .iris3{ position:absolute; width:30px; height:30px; border-radius:100%; background:black; margin:0px 3px; animation:gira3 1s alternate infinite; -moz-animation:gira3 1s alternate infinite; -webkit-animation:gira3 1s alternate infinite; } iris3::before{ content:""; position:absolute; width:7px; height:7px; border-radius:100%; background:white; margin:3px 14px; } .nose{ position:absolute; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid black; border-radius: 100px / 50px; margin:87px 62px; z-index:3335; animation:va 3s alternate infinite; -moz-animation:va 3s alternate infinite; -webkit-animation:va 3s alternate infinite; } .bocas3{ position:absolute; width:21px; height:12px; border-radius:0 0 30px 30px; background:#333; border:7px solid #333; margin:93px 55px; } .boqui{ position:absolute; width:35px; height:35px; border-radius:100%; background:#ddd; border-right:2px solid gray; margin:85px 35px; animation:va 3s alternate infinite; -moz-animation:va 3s alternate infinite; -webkit-animation:va 3s alternate infinite; } .boqui::before{ content:""; position:absolute; width:35px; height:35px; border-radius:100%; background:#ddd; border-left:2px solid gray; margin:0px 35px } .bigotitos{ position:absolute; width:90px; height:30px; border-radius:100%; border-bottom:2px solid black; margin:75px -12px; animation:va 3s alternate infinite; -moz-animation:va 3s alternate infinite; -webkit-animation:va 3s alternate infinite; } .bigotitos::before{ content:""; position:absolute; width:70px; height:21px; border-radius:100%; border-bottom:2px solid black; margin:13px 7px; -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); transform: rotate(-12deg); } .bigotitos::after{ content:""; position:absolute; width:70px; height:21px; border-radius:100%; border-bottom:2px solid black; margin:18px 9px; -webkit-transform: rotate(-21deg); -moz-transform: rotate(-21deg); transform: rotate(-21deg); } .bigotitos3{ position:absolute; width:90px; height:30px; border-radius:100%; border-bottom:2px solid black; margin:75px 60px; animation:va 3s alternate infinite; -moz-animation:va 3s alternate infinite; -webkit-animation:va 3s alternate infinite; } .bigotitos3::before{ content:""; position:absolute; width:70px; height:21px; border-radius:100%; border-bottom:2px solid black; margin:12px 12px; -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); transform: rotate(12deg); } .bigotitos3::after{ content:""; position:absolute; width:70px; height:21px; border-radius:100%; border-bottom:2px solid black; margin:16px 13px; -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); transform: rotate(25deg); } .legs{ position:absolute; width:35px; height:102px; border-radius:35px 35px 0 0; background:#bbb; border:1px solid gray; margin: 3px 86px; -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); transform: rotate(12deg); animation:baja3 3s alternate infinite; -moz-animation:baja3 3s alternate infinite; -webkit-animation: baja3 3s alternate infinite; } .legs::before{ content:""; display:block; width:45px; height:30px; border-radius:43px; background:#94948c; border:1px solid #333; margin:90px -5px; -webkit-transform: rotate(-9deg); -moz-transform: rotate(-9deg); transform: rotate(-9deg); } .legs3{ position:absolute; width:35px; height:102px; border-radius:35px 35px 0 0; background:#bbb; border:1px solid gray; margin: 3px 167px; -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); transform: rotate(-12deg); animation:baja7 3s alternate infinite; -moz-animation:baja7 3s alternate infinite; -webkit-animation: baja7 3s alternate infinite; } .legs3::before{ content:""; display:block; width:45px; height:30px; border-radius:43px; background:#94948c; border:1px solid #333; margin:90px -5px; -webkit-transform: rotate(9deg); -moz-transform: rotate(9deg); transform: rotate(9deg); } .legs7{ position:absolute; width:60px; height:60px; border-radius:60px 60px 0 0; background:#ccc; border:1px solid gray; margin:21px 55px } .legs7::before{ content:""; display:block; width:60px; height:30px; border-radius:21px; background:#94948c; margin:53px -12px } .legs9{ position:absolute; width:60px; height:60px; border-radius:60px 60px 0 0; background:#ccc; border:1px solid gray; margin:21px 170px } .legs9::before{ content:""; display:block; width:60px; height:30px; border-radius:21px; background:#94948c; margin:53px 12px } .cola{ position:absolute; width:30px; height:121px; border-radius:30px; background:#94948c; border:2px solid gray; margin: -152px 130px; animation:baja12 3s alternate infinite; -moz-animation:baja12 3s alternate infinite; -webkit-animation: baja12 3s alternate infinite; } .ball{ position:relative; width:3px; height:152px; background:black; margin:-900px auto; animation: uy 1s ease-in-out alternate infinite; -moz-animation:uy 1s ease-in-out alternate infinite; -webkit-animation:uy 1s ease-in-out alternate infinite; -webkit-transform-origin: uy 50% -40px; -moz-transform-origin:50% -40px; } .ball::after{ content:""; position:absolute; width:45px; height:45px; border-radius:100%; border-left:5px solid white; margin:162px -25px } .ball::before{ content:""; position:absolute; width:60px; height:65px; border-radius:100%; background:#ff6666; border-right:5px solid #E5394A; margin:152px -30px; } .ball3{ position:absolute; width:800px; height:30px; background:gray; margin:-30px 0px; z-index:333;} .cola3{ position:absolute; width:37px; height:35px; border-radius:100%; background:#94948c; border-bottom:7px solid gray; margin:-3px 0; animation:go 3s alternate infinite; -moz-animation:go 3s alternate infinite; -webkit-animation: go 3s alternate infinite; } @keyframes baja { 0%,25%{ transform:translatey(0px) } 35%,45%,50%,70%,90%,100% { transform:translatey(172px) }} @keyframes baja3{ 0%,25%,35%{ margin: 3px 86px; } 40%,50%{ margin: 7px 86px;} 60%,80%{ margin:3px 86px;} 90%,100% { margin: 7px 86px;}} @keyframes baja7{ 0%,25%,35%{ margin: 3px 167px; } 40%,50%{ margin: -7px 167px; } 60%,80%{ margin: 3px 167px; } 90%,100% { margin:-7px 167px; }} @keyframes baja9 { 0%,25%{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } 30%,40%{ -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); transform: rotate(-7deg); } 50%,60%{ -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); transform: rotate(7deg); } 70%,80%{ -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); transform: rotate(-7deg);} 90%,100%{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes baja12 { 0%,25%{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } 30%,40%{ -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); transform: rotate(7deg); } 50%,60%{ -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); transform: rotate(-7deg); } 70%,80%{ -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); transform: rotate(7deg);} 90%,100%{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes gira3{ 0% {transform:translatex(6px)} 100% {transform:translatex(0px)}} @keyframes uy{ 0%{ transform:rotate(-21deg); -webkit-transform:rotate(-21deg); -moz-transform:rotate(-21deg);} 100%{ transform:rotate(21deg); -webkit-transform:rotate(21deg); -moz-transform:rotate(21deg); } } @keyframes sube3{ 0%,25%{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } 35%,45%,50%,70%,90%,100% { -webkit-transform: rotate(21deg); -moz-transform: rotate(21deg); transform: rotate(21deg); }} @keyframes sube7 { 0%,25%{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } 35%,45%,50%, 70%,90%,100% { -webkit-transform: rotate(-21deg); -moz-transform: rotate(-21deg); transform: rotate(-21deg); }} @keyframes go { 0%,25% {transform:translatex(0px) translatey(0px) scale(1)} 30%,50% {transform:translatex(-7px) translatey(0px) scale(1)} 60%,80% {transform:translatex(0px) translatey(3px) scale(1)} 90%,100% {transform:translatex(-3px) translatey(0px) scale(.9)}} @keyframes va{ 0%,25%{transform:translateY(0px) } 50%,60%{ transform:translateY(3px) } 70%,80%{ transform:translateY(-3px)} 90%,100%{ transform:translateY(0px)} }
JAVASCRIPT
Expand for more options Login