.yellow.ball
View Compiled
@import "compass/css3";

*{@include box-sizing(border-box);}
body{; margin: 100px auto 0}

$red: #f16362;
$blue: #578ac7;
$black: #3b4647;
$yellow: #F3F27B;

@-webkit-keyframes move-balls {
  100% {
    box-shadow:
    179px 6px 0 -18px white,
    175px 2px 0 -18px white,
    179px 6px 0 -16px darken($black,15),
    175px 2px 0 -16px darken($black,15),
    177px 4px 0 -10px white,

    -360.568542495px -400px 0 $yellow,
    -360.568542495px 400px 0 $red,


    71.00708499px 400px 0 $yellow,
    171.00708499px 0px 0 darken($black,15),
    71.00708499px -400px 0 $red,


    406.13708499px 260px 0 $red,
    906.13708499px 220px 0 $yellow,
    906.13708499px -220px 0 $red,
    406.13708499px -260px 0 $yellow,



    1141.705627485px 1080px 0 $yellow,
    1141.705627485px 540px 0 $red,
    1141.705627485px 0px 0 $yellow,
    1041.705627485px -540px 0 $red,
    1141.705627485px -1080px 0 $red
    ;
  }
  20% {
    box-shadow:
    79px 6px 0 -18px white,
    75px 2px 0 -18px white,
    79px 6px 0 -16px darken($black,15),
    75px 2px 0 -16px darken($black,15),
    77px 4px 0 -10px white,
    36.568542495px -20px 0 $yellow,
    36.568542495px 20px 0 $red,
    71.00708499px 40px 0 $yellow,
    71.00708499px 0px 0 darken($black,15),
    71.00708499px -40px 0 $red,
    106.13708499px 60px 0 $red,
    106.13708499px 20px 0 $yellow,
    106.13708499px -20px 0 $red,
    106.13708499px -60px 0 $yellow,
    141.705627485px 80px 0 $yellow,
    141.705627485px 40px 0 $red,
    141.705627485px 0px 0 $yellow,
    141.705627485px -40px 0 $red,
    141.705627485px -80px 0 $red
    ;
  }
  0%{
    box-shadow:
        79px 6px 0 -18px white,
        75px 2px 0 -18px white,
        79px 6px 0 -16px darken($black,15),
        75px 2px 0 -16px darken($black,15),
        77px 4px 0 -10px white,
        36.568542495px -20px 0 $yellow,
        36.568542495px 20px 0 $red,
        71.00708499px 40px 0 $yellow,
        71.00708499px 0px 0 darken($black,15),
        71.00708499px -40px 0 $red,
        106.13708499px 60px 0 $red,
        106.13708499px 20px 0 $yellow,
        106.13708499px -20px 0 $red,
        106.13708499px -60px 0 $yellow,
        141.705627485px 80px 0 $yellow,
        141.705627485px 40px 0 $red,
        141.705627485px 0px 0 $yellow,
        141.705627485px -40px 0 $red,
        141.705627485px -80px 0 $red,
        -200px 0 0 white;
  }
}
.ball{
    position: absolute;
    top: 50%;
    right: 50%;
    width: 40px;
    height: 40px;
    @include border-radius(100%);
    @include background-origin(border-box);

    animation: move-balls 7s cubic-bezier(0.42,0.66,0.66,0.14) infinite;
}
.yellow{
    background-color: $yellow;
}
.red{
    background-color: $red;
}
.blue{
    background-color: $blue;
}
.black{
    background-color: $black;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.