Fun with CSS

Create a simple animation using CSS
The Markup with Style

<!DOCTYPE html>
<html>
<head>
  <style>
    #span1, #span2, #span3, #span4, #span5, #span6 {
      width: 16px; height: 16px; line-height: 16px; 
      border-radius: 50%;  -moz-border-radius: 50%; 
      background-color: red; display: block; position: relative; top: 100px;
      color: #fff; text-align: center;

      display: -moz-inline-stack;
      display: inline-block;
      *display: inline;
      vertical-align: top;

      -webkit-animation-name:sp1;
      -webkit-animation-duration:5s;
      -webkit-animation-timing-function:10;
      -webkit-animation-delay:0;
      -webkit-animation-play-state:active;
      -webkit-animation-iteration-count:1;
    }

    #span1 { width: 16px; height: 16px; background-color: #000;}

    #span2 {
      content:'';
      -webkit-animation-name: sp2;
    }
    #span2:after {
      content:'2';
      -webkit-animation: sp2 13s;
    }

    #span3 {
      -webkit-animation-name:sp3;
    }
    #span3:after {
      content:'0';
      -webkit-animation: sp3 12s;
    }

    #span4 {
      -webkit-animation-name:sp4;
    }
    #span4:after {
      content:'2';
      -webkit-animation: sp4 11s;
    }

    #span5 {
      -webkit-animation-name:sp5;
    }
    #span5:after {
      content:'4';
      -webkit-animation: sp5 6s;
    }

    #span6 { background-color: transparent; color: #000; top: 120px; 
      left: -15%; width: auto; -webkit-animation-name: sp6; 
      font-size: 15px; font-family: corbel; }

    @-webkit-keyframes sp1 {
      from {
        transform:translate(-50%, -50%) 
          rotate(var(--r, 20deg)) 
          translate(calc(150vmin));
      }
    }

    @-webkit-keyframes sp2 {
      from {
        transform:translate(-50%, -50%) 
          rotate(var(--r, -20deg)) 
          translate(calc(50vmin));
        content: '';
      }
      to {
        content: '2';
      }
    }
    @-webkit-keyframes sp3 {
      from {
        transform:translate(-50%, -50%) 
          rotate(var(--r, -40deg)) 
          translate(calc(50vmin));
        content: '';
      }
      to {
        content: '0';
      }
    }
    @-webkit-keyframes sp4 {
      from {
        transform:translate(-50%, -50%) 
          rotate(var(--r, 40deg)) 
          translate(calc(50vmin));
        content: '';
      }
      to {
        content: '2';
      }
    }
    @-webkit-keyframes sp5 {
      from {
        transform:translate(-50%, -50%) 
          rotate(var(--r, 0deg)) 
          translate(calc(50vmin));
        content: '';
      }
      to {
        content: '3';
      }
    }

    @-webkit-keyframes sp6 {
      from {
        transform:translate(-50%, -50%) 
          rotate(var(--r, -150deg)) 
          translate(calc(-150vmin));
      }
    }
  </style>
</head>

<body>
  <span id='span1'></span>
  <span id='span2'></span>
  <span id='span3'></span>
  <span id='span4'></span>
  <span id='span5'></span>
  <span id='span6'>Happy Coding... 🙂</span>
</body>
</html>
Try it
← Previous
Basic animation using CSS

The Markup with Style
