Xbox One Achievement Popup Animation

index.html

<div class="content">
    <div class="title">Achievement Unlocked!</div>
    <div class="inputs">
      <div class="input"><input required maxlength="18" type="text" class="name input" placeholder="Achievement Name"></div>
      <div class="input"><input required maxlength='3' type="text" min='0' placeholder="Score" class="score input"></div>
      <a class="button pop"><span>Pop!</span></a>
    </div>
    <div class="animation">
      <div class="circle">
        <div class="img trophy_animate trophy_img">
          <img class="trophy_1" src="https://dl.dropboxusercontent.com/s/m9xt201vymisc91/trophy_full.svg" alt="Xbox Logo">
          <img class="trophy_2" src="https://dl.dropboxusercontent.com/s/e7lqmrylmva92oi/trophy_no_handles.svg" alt="Xbox Logo">
        </div>
        <div class="img xbox_img">
          <img src="https://dl.dropboxusercontent.com/s/s07rov9h2g5f0cx/xbox-logo.svg" alt="">
        </div>
      </div>
        <div class="banner-outer">
          <div class="banner">
            <div class="achieve_disp">
              <span class="unlocked">Achievement Unlocked!</span>
              <div class="score_disp">
                <div class="gamerscore">
                  <img width="20px" src="https://dl.dropboxusercontent.com/s/5nu0ep8ranqahq6/G.svg" alt="gamerscore" />
                  <input disabled type="text" class="acheive_score" >
                </div>
                <span class="hyphen_sep">-</span>
                <input disabled type="text" class="achiev_name">
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
  <div class="footer">
    <a href="https://www.twitter.com/Andrew_Haine" target="_new" class="fa fa-twitter"></a>
    <a href="https://www.andrewhaine.co.uk" target="_new" class="fa fa-globe"></a>
  </div>

script.js

$(document).ready(function() {

  const button = $('.pop');
  const animatedElements = [
    {
      'el': $('.circle'),
      'class': 'circle_animate'
    },
    {
      'el': $('.banner'),
      'class': 'banner-animate'
    },
    {
      'el': $('.achieve_disp'),
      'class': 'achieve_disp_animate'
    }
  ];

  function animateElements() {
    animatedElements.forEach(element => {
      element['el'].addClass(element['class']);
      setTimeout(() => {
        element['el'].removeClass(element['class']);
      }, 10000)
    });
  }

  function placeValues() {
    var nameInput = $('.name').val();
    $('.achiev_name').val(nameInput);
    var scoreInput = $('.score').val();
    $('.acheive_score').val(scoreInput);
  }

  button.on('click', function() {
    placeValues();
    animateElements();
    $(this).addClass('animating');
    setTimeout(() => {
      $(this).removeClass('animating');
    }, 1000);
  });
  
  $('.input').on('focus', function(){
    $(this).parent().addClass('input-focussed')
  })
  $('.input').on('blur', function(){
    var thisInput = $(this);
    $(this).parent().removeClass('input-focussed');
    if(thisInput.val() != ""){
      thisInput.parent().addClass('input-complete');
    } else {
      thisInput.parent().removeClass('input-complete');
    }
  })
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

body {
  background-color: #7BB8FC;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  overflow-x: hidden;
  width: 100vw !important; }
  body ::-moz-selection {
    background: rgba(255, 255, 255, 0.3); }
  body ::selection {
    background: rgba(255, 255, 255, 0.3); }

html {
  overflow-x: hidden; }

.footer {
  height: 40px;
  position: relative;
  width: 80vw;
  display: -ms-flexbox;
  display: flex;
  margin-top: 25px;
  -ms-flex-pack: center;
      justify-content: center; }
  .footer a {
    color: white;
    font-size: 15pt;
    padding-right: 15px;
    text-decoration: none;
    opacity: 0.5;
    transition: all 0.1s ease-in-out; }
    .footer a:hover {
      opacity: 1;
      transition: all 0.1s ease-in-out; }

.content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  width: 60%;
  -ms-flex-align: center;
      align-items: center; }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.title {
  color: white;
  font-size: 60pt;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  font-weight: bold;
  margin-top: 20px;
  width: 80%; }

.inputs {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: baseline;
      align-items: baseline;
  width: 100%;
  margin-top: 30px; }
  .inputs .input {
    position: relative;
    -ms-flex-positive: 6;
        flex-grow: 6; }
    .inputs .input::after {
      content: "";
      width: 80%;
      height: 2px;
      background-color: rgba(255, 255, 255, 0.5);
      position: absolute;
      left: 0;
      bottom: 0; }
    .inputs .input::before {
      content: "";
      width: 0%;
      height: 2px;
      background-color: white;
      position: absolute;
      left: 0;
      bottom: 0;
      transition: all 0.2s ease-in-out; }
    .inputs .input:nth-child(2) {
      -ms-flex-positive: 1;
          flex-grow: 1; }
    .inputs .input input {
      background: none;
      border: none;
      outline: none;
      margin-right: 90px;
      font-family: 'Open Sans', sans-serif;
      color: white;
      font-size: 16pt;
      padding-left: 10px;
      padding-bottom: 4px;
      font-weight: 200; }
      .inputs .input input::-webkit-input-placeholder {
        font-family: 'Open Sans', sans-serif;
        color: white;
        font-style: italic;
        font-size: 16pt;
        font-weight: 200;
        opacity: 0.5; }
      .inputs .input input::-moz-placeholder {
        font-family: 'Open Sans', sans-serif;
        color: white;
        font-style: italic;
        font-size: 16pt;
        font-weight: 200;
        opacity: 0.5; }
      .inputs .input input:-ms-input-placeholder {
        font-family: 'Open Sans', sans-serif;
        color: white;
        font-style: italic;
        font-size: 16pt;
        font-weight: 200;
        opacity: 0.5; }
      .inputs .input input::placeholder {
        font-family: 'Open Sans', sans-serif;
        color: white;
        font-style: italic;
        font-size: 16pt;
        font-weight: 200;
        opacity: 0.5; }
  .inputs .button {
    width: 150px;
    height: 50px;
    border: white 2px solid;
    border-radius: 200px;
    outline: none;
    background: none;
    cursor: pointer;
    font-family: "open sans", sans-serif;
    color: white;
    font-weight: 400;
    font-size: 15pt;
    position: relative;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    z-index: 2;
    transition: all 0.3s ease-in-out; }
    .inputs .button span {
      z-index: 2; }
    .inputs .button::before {
      content: "";
      width: 100%;
      height: 0%;
      background: white;
      position: absolute;
      display: block;
      z-index: 1;
      left: 0px;
      bottom: 0px;
      transition: all 0.2s ease-in-out; }
    .inputs .button:hover {
      transition: all 0.3s ease-in-out;
      color: #7BB8FC; }
      .inputs .button:hover span {
        z-index: 2; }
      .inputs .button:hover::before {
        content: "";
        width: 100%;
        height: 100%;
        background: white;
        position: absolute;
        display: block;
        left: 0px;
        bottom: 0px;
        transition: all 0.2s ease-in-out; }

.input-focussed::before {
  width: 80% !important;
  content: "";
  height: 2px;
  background-color: white;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all 0.2s ease-in-out; }

.input-complete::before {
  width: 80% !important;
  content: "";
  height: 2px;
  background-color: #5EDE28 !important;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all 0.2s ease-in-out; }

.animating {
  animation: bounce;
  animation-duration: 2s; }

@keyframes bounce {
  8% {
    transform: translateY(-10px); }
  10% {
    transform: translateY(0px); }
  15% {
    transform: translateY(-8px); }
  19% {
    transform: translateY(0px); }
  21% {
    transform: translateY(-4px); }
  24% {
    transform: translateY(0px); }
  26% {
    transform: translateY(-1px); }
  27% {
    transform: translateY(0px); } }

@keyframes rotate {
  0% {
    transform: rotateY(0deg); }
  50% {
    transform: rotateY(360deg); }
  100% {
    transform: rotateY(0deg); } }

@keyframes scale_circle_1 {
  0% {
    transform: scale(0.1); }
  2% {
    opacity: 1; }
  5% {
    transform: scale(1);
    opacity: 0.8; }
  6% {
    opacity: 0; }
  9% {
    opacity: 0; }
  10% {
    transform: scale(1);
    opacity: 0; }
  90% {
    transform: scale(0.1); }
  92% {
    opacity: 1; }
  95% {
    transform: scale(1);
    opacity: 0.8; }
  96% {
    opacity: 0; }
  99% {
    opacity: 0; }
  100% {
    transform: scale(1);
    opacity: 0; } }

@keyframes circle_grow_move {
  1% {
    opacity: 0;
    transform: scale(0.1); }
  4% {
    transform: scale(1.1); }
  5% {
    transform: scale(1);
    opacity: 1; }
  11% {
    transform: translate(0);
    background-color: #39960C; }
  24% {
    transform: translateX(-130%);
    background-color: #42ae0e; }
  85% {
    transform: translateX(-130%);
    background-color: #42ae0e; }
  89% {
    transform: translateX(0);
    background-color: #39960C; }
  94% {
    transform: scale(1); }
  96% {
    transform: scale(1.1); }
  98% {
    transform: scale(0.1);
    opacity: 1; }
  99% {
    opacity: 0; }
  100% {
    transform: scale(0.1); } }

@keyframes trophy_animate_opacity {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  24% {
    opacity: 1; }
  90% {
    opacity: 1; }
  95% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes xbox_animate_opacity {
  0% {
    opacity: 1; }
  19% {
    opacity: 1; }
  23% {
    opacity: 0; }
  90% {
    opacity: 0; }
  95% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes banner-animate {
  0% {
    width: 100px;
    opacity: 0; }
  2% {
    opacity: 0; }
  4% {
    opacity: 1; }
  11% {
    width: 100px; }
  24% {
    width: 355px; }
  85% {
    width: 355px; }
  89% {
    width: 100px;
    opacity: 1; }
  90% {
    opacity: 0; } }

@keyframes textSlide {
  0% {
    transform: translateY(0px);
    opacity: 0; }
  20% {
    transform: translateY(0px);
    opacity: 0; }
  25% {
    transform: translateY(-85px);
    opacity: 1; }
  79% {
    transform: translateY(-85px);
    opacity: 1; }
  84% {
    transform: translateY(-200px);
    opacity: 0; }
  100% {
    opacity: 0; } }

.animation {
  width: 30%;
  height: 110px;
  padding: 5px 0px 5px 0px;
  margin-top: 80px;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center; }

.circle.circle_animate {
  animation: circle_grow_move;
  animation-duration: 10s;
  transform-origin: center; }
  .circle.circle_animate::before {
    animation: scale_circle_1;
    animation-duration: 10s;
    transform-origin: center;
    animation-iteration-count: 2; }
  .circle.circle_animate::after {
    animation: scale_circle_1;
    animation-duration: 10s;
    animation-delay: 0.1s;
    transform-origin: center; }
  .circle.circle_animate .trophy_animate {
    animation: trophy_animate_opacity;
    animation-duration: 10s; }
  .circle.circle_animate .xbox_img {
    animation: xbox_animate_opacity;
    animation-duration: 10s; }

.circle {
  width: 100px;
  height: 100px;
  top: 0;
  opacity: 0;
  margin: 0 auto;
  border-radius: 100%;
  background: #39960C;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  z-index: 4; }
  .circle::before {
    content: "";
    opacity: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #40a90e;
    position: absolute;
    margin: 0 auto;
    top: 0;
    left: 0;
    border-radius: 100%;
    display: block; }
  .circle::after {
    content: "";
    opacity: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #32830a;
    position: absolute;
    margin: 0 auto;
    top: 0;
    left: 0;
    border-radius: 100%;
    display: block; }
  .circle .img {
    height: 50%;
    left: 25%;
    top: 25%;
    position: absolute;
    z-index: 100; }
    .circle .img img {
      height: 100%;
      position: absolute; }
  .circle .trophy_1 {
    animation: rotate;
    animation-duration: 6s;
    animation-iteration-count: infinite; }

.achieve_disp_animate {
  animation: textSlide;
  animation-duration: 10s; }

.banner {
  width: 355px;
  height: 100px;
  position: relative;
  left: 0;
  opacity: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  right: 0;
  margin: 0 auto;
  background: #39960C;
  top: 10px;
  overflow: hidden;
  border-radius: 100px; }

.banner-outer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  width: 100%;
  top: -100%;
  position: relative; }

.banner.banner-animate {
  animation: banner-animate;
  animation-duration: 10s; }

.achieve_name::before, .achieve_score::before {
  display: none !important;
  opacity: 0;
  content: ""; }

.achieve_name::after, .achieve_score::after {
  display: none;
  content: ""; }

.achieve_disp {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  width: 60%;
  -ms-flex-pack: center;
      justify-content: center;
  margin-left: 25%;
  height: 100%;
  margin-top: 150px; }
  .achieve_disp * {
    margin-bottom: 5px; }
  .achieve_disp input {
    opacity: 1 !important; }
  .achieve_disp .score_disp {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: start;
        align-items: flex-start; }
  .achieve_disp .achiev_name {
    border: none;
    outline: none;
    background: none;
    font-family: 'open sans', sans-serif;
    font-size: 13pt;
    color: white; }

.unlocked {
  width: 100%;
  font-family: 'open sans', sans-serif;
  color: white;
  font-weight: 400; }

.gamerscore {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: center;
      align-items: center; }
  .gamerscore input {
    margin-left: 5px;
    width: 30px;
    margin-right: 5px;
    background: none;
    outline: none;
    border: none;
    color: white;
    overflow: visible;
    font-family: 'open sans', sans-serif;
    font-weight: bold;
    font-size: 13pt; }

.hyphen_sep {
  margin-right: 5px;
  color: white;
  font-size: 15pt;
  font-weight: bold; }

/* Tablet Screen Query */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .title {
    font-size: 30pt; }
  .content {
    width: 70%; }
  .inputs {
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center; }
    .inputs .input {
      width: 100%;
      padding-top: 10px;
      padding-bottom: 10px; }
      .inputs .input::after {
        width: 100%; }
      .inputs .input input {
        padding-bottom: 2px;
        width: 100%; }
  .input-complete::before {
    width: 100% !important; }
  .input-focussed::before {
    width: 100% !important; }
  .pop {
    margin-top: 30px; }
  .animation {
    width: 70%; }
  .unlocked {
    margin-bottom: 20px; }
  .acheive_score {
    width: 80px !important; } }

/* Mobile Screen Query */
@media only screen and (max-width: 767px) {
  .title {
    font-size: 25pt; }
  .content {
    width: 70%; }
  .inputs {
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center; }
    .inputs .input {
      width: 100%;
      padding-top: 10px;
      padding-bottom: 10px; }
      .inputs .input::after {
        width: 100%; }
      .inputs .input input {
        padding-bottom: 2px;
        width: 100%;
        font-size: 12pt; }
        .inputs .input input::-webkit-input-placeholder {
          font-size: 12pt; }
        .inputs .input input::-moz-placeholder {
          font-size: 12pt; }
        .inputs .input input:-ms-input-placeholder {
          font-size: 12pt; }
        .inputs .input input::placeholder {
          font-size: 12pt; }
  .input-complete::before {
    width: 100% !important; }
  .input-focussed::before {
    width: 100% !important; }
  .pop {
    margin-top: 30px; }
  .animation {
    width: 120%; }
  .unlocked {
    margin-bottom: 20px; }
  .acheive_score {
    width: 80px !important; } }

/* Laptop Screen Query */
@media only screen and (min-width: 1030px) and (max-width: 1600px) {
  .title {
    font-size: 50pt; }
  .content {
    width: 70%; }
  .inputs {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: center;
        justify-content: center; }
    .inputs .input {
      width: 45%;
      padding-top: 10px;
      padding-bottom: 10px;
      margin: none; }
      .inputs .input::after {
        width: 80%; }
      .inputs .input input {
        padding-bottom: 2px;
        width: 100%;
        font-size: 20pt; }
        .inputs .input input::-webkit-input-placeholder {
          font-size: 20pt; }
        .inputs .input input::-moz-placeholder {
          font-size: 20pt; }
        .inputs .input input:-ms-input-placeholder {
          font-size: 20pt; }
        .inputs .input input::placeholder {
          font-size: 20pt; }
  .input-complete::before {
    width: 80% !important; }
  .input-focussed::before {
    width: 80% !important; }
  .pop {
    margin-top: 30px; }
  .animation {
    width: 40%; } }

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

xbox-one-achievement-popup-animation.markdown

Xbox One Achievement Popup Animation

Hand coded CSS recreation of the popup notification for xbox one achievements. This animation displays on the screen when a player unlocks an achievement. I recreated the animation purely in CSS and HTML.

A Pen by Andrew Haine on CodePen.

License.