balls sinusoid

balls sinusoid

by Alexander Zonov

HTML

<div class="background">
    <div class="sinusoid">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
    </div>
</div>
<div class="background">
    <div class="sinusoid">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
    </div>
</div>
<div class="background">
    <div class="sinusoid">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
    </div>
</div>

CSS

@-webkit-keyframes color_change {
    0%   {background-color: red;}
    10%  {background-color: yellow;}
    30%  {background-color: orange;}
    50%  {background-color: green;}
    70%  {background-color: white;}
    90%  {background-color: blue;}
    100%   {background-color: red;}
}

@-webkit-keyframes bounce { 
    0%   {transform: translateY(0);}
3.125%   {transform: translateY(3.52px);}
6.25%   {transform: translateY(8.37px);}
9.375%   {transform: translateY(12.88px);}
12.5%   {transform: translateY(16.88px);}
15.625%   {transform: translateY(20.21px);}
18.75%   {transform: translateY(22.73px);}
21.875%   {transform: translateY(24.34px);}
25%   {transform: translateY(24.98px);}
28.125%   {transform: translateY(24.34px);}
31.25%   {transform: translateY(22.73px);}
34.375%   {transform: translateY(20.21px);}
37.5%   {transform: translateY(16.88px);}
40.625%   {transform: translateY(12.88px);}
43.75%   {transform: translateY(8.37px);}
46.875%   {transform: translateY(3.52px);}
50%   {transform: translateY(0);}
53.125%   {transform: translateY(-3.52px);}
56.25%   {transform: translateY(-8.37px);}
59.375%   {transform: translateY(-12.88px);}
62.5%   {transform: translateY(-16.88px);}
65.625%   {transform: translateY(-20.21px);}
68.75%   {transform: translateY(-22.73px);}
71.875%   {transform: translateY(-24.34px);}
75%   {transform: translateY(-24.98px);}
78.125%   {transform: translateY(-24.34px);}
81.25%   {transform: translateY(-22.73px);}
84.375%   {transform: translateY(-20.21px);}
87.5%   {transform: translateY(-16.88px);}
90.625%   {transform: translateY(-12.88px);}
93.75%   {transform: translateY(-8.37px);}
96.875%   {transform: translateY(-3.52px);}
100%   {transform: translateY(0);}
}

.background{
    background-color: #000;
    height: 150px;
    text-align: center;
}

.sinusoid {
    display: inline-block;
    height: 100px;
    margin: 25px 0;
}

.ball{
    margin-top: 25px;
    width: 25px;
    height: 25px;
    border-radius: 25px;
   ...