.ani-box {height: 475px; position relative; overflow: hidden;}
#drain {
width: 400px;
height: 400px;
margin: -1em auto 0px auto;
position: relative;
border-radius: 50%;
padding-bottom: 0px;
box-sizing: content-box;
}
@media screen and (max-width: 720px) {
#drain {transform: scale(0.7); top: -50px;}
.ani-box {height: 400px;}
}
@media screen and (max-width: 420px) {
#drain {transform: scale(0.4); top: -100px; left: -10%;}
.ani-box {height: 300px;}
}
#drain {
box-shadow: 0 0 0px 5px #555, 0 0 100px 20px #0000FF inset;
background: #000000;
background: -moz-radial-gradient(center, ellipse cover, #000000 0%, #1e5799 18%, #1e5799 42%, #2988d7 99%, #2989d8 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#000000), color-stop(18%,#1e5799), color-stop(42%,#1e5799), color-stop(99%,#2988d7), color-stop(100%,#2989d8));
background: -webkit-radial-gradient(center, ellipse cover, #000000 0%,#1e5799 18%,#1e5799 42%,#2988d7 99%,#2989d8 100%);
background: -o-radial-gradient(center, ellipse cover, #000000 0%,#1e5799 18%,#1e5799 42%,#2988d7 99%,#2989d8 100%);
background: -ms-radial-gradient(center, ellipse cover, #000000 0%,#1e5799 18%,#1e5799 42%,#2988d7 99%,#2989d8 100%);
background: radial-gradient(ellipse at center, #000000 0%,#1e5799 18%,#1e5799 42%,#2988d7 99%,#2989d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#2989d8',GradientType=1 );
}
.circum, .circum2, .circum3, .circum4, .circum5 {
width: 125px;
height: 125px;
position: absolute;
border-radius: 50%;
margin-top: -63px;
margin-left: -63px;
top: 50%;
left: 50%;
animation: circum 25s cubic-bezier(0.8, 0.0, 1.0, 0.8) infinite;
}
.circum2 {
animation-delay: 5s;
}
.circum3 {
animation-delay: 10s;
}
.circum4 {
animation-delay: 15s;
}
.circum5 {
animation-delay: 20s;
}
.ball-red, .ball-blue, .ball-yellow, .ball-green, .ball-purple {
border: 5px solid #000000;
width: 45px;
height: 45px;
border-radius: 50%;
position: absolute;
margin-left: -25px;
margin-top: -25px;
left: 50%;
top: 50%;
opacity:0;
animation: ball-roll 25s linear infinite;
}
.ball-red {
background-color: #FF0000;
}
.ball-blue {
background-color: #00FFFF;
animation-delay: 5s;
}
.ball-yellow {
background-color: #FFFF00;
animation-delay: 10s;
}
.ball-green{
background-color: #009900;
animation-delay: 15s;
}
.ball-purple{
background-color: #FF00FF;
animation-delay: 20s;
}
@keyframes circum {
0% {transform: rotateZ( 0deg);}
100% {transform: rotateZ(5760deg);}
}
@keyframes ball-roll {
0% {opacity:1; margin-top:400px;}
50% {opacity:1; margin-top:200px;}
90% {opacity:1; transform: scale(1.0);}
100%{opacity:.3; transform: scale(0.1);}
}
Multi-colored balls spinning down a drain. Other ideas for this type of animation could be a Roulette wheel, gumball machine, or basketball spinning on the rim, to name a few.
]]>