CodePen Embed - Game On! animated

<div class="container">
  <div class="phone-header">
    <div class="left"><i class="fa fa-circle" aria-hidden="true"></i> <i class="fa fa-circle" aria-hidden="true"></i> <i class="fa fa-circle" aria-hidden="true"></i> <i class="fa fa-circle-o" aria-hidden="true"></i> <i class="fa fa-circle-o" aria-hidden="true"></i> <i class="fa fa-circle-o" aria-hidden="true"></i> VIRGIN <i class="fa fa-wifi" aria-hidden="true"></i></div> 
    <time datetime="2011-01-12">2:45 pm</time>
    <div class="right"><i class="fa fa-bluetooth-b" aria-hidden="true"></i> 22% <i class="fa fa-battery-full" aria-hidden="true"></i></div>
    
  </div>
    <header>
      <h3><i class="fa fa-times" aria-hidden="true"></i>RESULTS<i class="fa fa-comment-o" aria-hidden="true"></i></h3>
      <div class="user"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt=""></div>
      <div class="bolt"><i class="fa fa-flash" aria-hidden="true"></i></div> 
      <div class="user"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/fbmore/128.jpg" alt=""></div>
    </header><!-- /header -->
    <main>
      <h1>YOU WON!</h1>
      <h4>-You won and are the best!-</h4>
      <div class="badges">
        <div class="badge-yellow">
          <span>COINS <br><span>250</span></span>
        </div>
        <div class="badge-white">
        <span>FLASHES <br><span>2 <i class="fa fa-flash" aria-hidden="true"></i></span></span>
        </div>
      </div>
      <div class="score">
        4 <span>:</span> 2
        <div class="footer"><i class="fa fa-circle-o" aria-hidden="true"></i> <i class="fa fa-circle" aria-hidden="true"></i> </div>
        
      </div>

    </main><!-- /main -->
    <footer>
      <button class="upload"><i class="fa fa-upload" aria-hidden="true"></i></button>
      <button class="btn btn-right-align challenge">CHALLENGE <i class="fa fa-flash" aria-hidden="true"></i></button>
    </footer>
  </div>

@function base-color($key) {
  @return     unquote(map-get($base-colors, $key));
}
@mixin clearfix {
  &:after {
    display: table;
    clear: both;

    content: '';
  }
}
$base-colors: (
  dark: '#201822',
  PastelGreen: '#6be162',
  Saffron: '#f7cd34',
  BurningOrange: '#fe6d3c',
  Scarlet: '#FF3612'
);



*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
html{
  font-size: 62.5%;
  /*
     set font size to this percentage so we can use rems more easily
      EXAMPLE 
      font-size: 1.4rem; 
      font-size: 2.4rem;
      */
}



html,
body {
  font-family: sans-serif;
  font-weight: 400;

  overflow: visible;

  height: 100%;
  margin: 0;
  padding: 0;

  background-color: #201822;
}
body {
  font-size: 16px;
  font-size: 1.6rem;

  position: relative;

  overflow: hidden;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &:before {
    position: absolute;
    z-index: 1;
    top: -415px;
    left: 50%;

    width: 2104px;
    

    content: '';
    transform: translateX(-50%);
  
    border-radius: 50%;
    background-color: base-color('Saffron');
    animation: bubble 0.75s cubic-bezier(.17, .88, .32, 1.27) both;
  }
}

@keyframes bubble{
  from {
    height:0px;
  }
  to {
    height: 646px;
  }
}

@keyframes fadeIn{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.container {
  position: relative;
  z-index: 2;

  overflow: hidden;

  width: 100%;
  max-width: 480px;
  margin: 0 auto;

  background-color: #281c26;
  -webkit-box-shadow: 0 0 61px -4px rgba(0,0,0,.58);
     -moz-box-shadow: 0 0 61px -4px rgba(0,0,0,.58);
          box-shadow: 0 0 61px -4px rgba(0,0,0,.58);
  &:before{
    position: absolute;
    z-index: 1;
    top: -90px;
    left: 50%;

    width: 255%;
    //height: 326px;

    content: '';
    transform: translateX(-50%);

    border-radius: 50%;
    background-color: base-color('Saffron');
    animation: bubbletwo 0.75s cubic-bezier(.17, .88, .32, 1.27) both;
  }
}

@keyframes bubbletwo{
  from {
    height:0px;
  }
  to {
    height: 326px;
  }
}


.btn{
  font-family: 'source_sans_probold';
  font-size: 14px;
  line-height: 1;

  position: relative;

  display: inline-block;
  overflow: hidden;

  width: 70%;
  margin:  0;
  padding: 18px 25px ;

  -moz-user-select: none;
  transition: background-color .3s ease 0s;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;

  color: #fff;
  border: none;
  border-radius: 5px;
  background-color: base-color('BurningOrange');
  background-image: none;
  &:hover{
    text-decoration: none;
  }
  &-right-align{
    float: right;
    clear: all;
  }
}


.user {
  position: relative;
  z-index: 2;

  display: inline-block;

  vertical-align: middle;
  &:before {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;

    width: 108px;
    height: 108px;

    content: '';
    transform: translate(-50%,-52%);

    border: 4px solid #ebbe1d;
    border-radius: 50%;
  }
  &:after {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;

    width: 120px;
    height: 120px;

    content: '';
    transform: translate(-50%,-52%);

    border: 1px solid #ebbe1d;
    border-radius: 50%;
  }
  &-name {
  }
  img {
    position: relative;
    z-index: 2;

    max-width: 100px;

    //border-radius: 50%;
    animation: round 1.2s cubic-bezier(.17, .88, .32, 1.27) both;
  }
  &-points {
  }
}


//structures



.phone-header {
  font-size: 1.2rem;

  position: relative;
  z-index: 2;

  padding: 5px ;

  text-align: center;
  .left {
    display: inline-block;
    float: left;
  }
  .right {
    display: inline-block;
    float: right;
  }
  time {
    display: inline-block;
  }
  .fa-circle,
  .fa-circle-o {
    font-size: .7rem;

    display: inline-block;

    vertical-align: middle;
  }
}



header {
  height: 211px;
  padding: 0 16px;

  text-align: center;
  h3 {
    font-size: 1.5rem;
    font-weight: normal;

    position: relative;
    z-index: 2;

    margin-bottom: 30px;
  }
  .fa.fa-times {
    float: left;
  }
  .fa.fa-comment-o {
    float: right;
  }
  .bolt {
    font-size: 2rem;

    position: relative;
    z-index: 2;

    display: inline-block;

    margin: 0 30px;

    vertical-align: middle;

    color: base-color('Scarlet');
  }
}


main {
  h1 {
    font-size: 7.0rem;

    margin-top: 20px;
    margin-bottom: 0;

    text-align: center;

    color: base-color('PastelGreen');
  }
  h4 {
    font-size: 1.1rem;

    margin-top: 5px;

    text-align: center;

    color: #fff;
  }
  .badges {
    padding-top: 20px;

    text-align: center;
  }
  .badge {
    &-yellow,
    &-white {
      line-height: 114px;

      position: relative;

      display: inline-block;

      //width: 90px;
      //height: 90px;

      vertical-align: middle;

      //border-radius: 50%;
      animation: round 0.75s cubic-bezier(.17, .88, .32, 1.27) both;
      &:before {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;

        width: 104px;
        height: 104px;

        content: '';
        transform: translate(-50%,-50%);
        //border: 4px solid #ebbe1d;

        border-radius: 50%;
      }
      span {
        font-size: 1.1rem;
        line-height: 1;

        display: inline-block;
        span {
          font-size: 2.5rem;

          padding-top: 2px;
        }
      }
    }
    &-yellow {
      margin-right: 20px;

      background-color: base-color('Saffron');
      &:before {
        border: 4px dotted base-color('Saffron');
      }
    }
    &-white {
      margin-left: 20px;

      background-color: #fff;
      &:before {
        border: 4px solid #fff;
      }
      span {
        span {
          color: base-color('Scarlet');
        }
      }
    }
  }
  @keyframes round{
    from {
      width: 0;
      height: 0;
      border-radius: 0;
    }
    to {
      width: 90px;
      height: 90px;
      border-radius: 50%;
    }
  }
  .score {
    font-size: 13rem;

    padding-top: 30px;

    text-align: center;

    color: #fff;
    span {
      font-size: 6rem;

      display: inline-block;

      margin: 0 30px;

      vertical-align: middle;
    }
    .footer{
      font-size: 1.2rem;
    }
  }
}
footer {
  display: block;

  padding-top: 20px;

  @include clearfix();
  .upload {
    line-height: 1;

    display: inline-block;
    float: left;

    width: 25%;
    padding: 18px 25px;

    -moz-user-select: none;
    transition: background-color .3s ease 0s;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;

    color: #645461;
    border: 1px solid #645461;
    border-radius: 5px;
    background-color: base-color('dark');
    &:hover{
      text-decoration: none;
    }
  }
}

View Compiled


(function($) {
  'use strict';


  var config = {
    debug: false,
    istouch:false,
    touchOrClick: ''
  };
  var  log= {
    debug: function(content){
      if ((window.console && window.console.log) && config.debug){
        console.log(content);
      }
    }
  };


  var app = {

    init: function(){
      var _this = this;
      var json = '';

    }
  };


  app.init();

}(jQuery));

Run Pen

This Pen is owned by Rob Lloveras on CodePen.

See more by @Sensiblemnd on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.