1

I am trying to create an animation that grows an html node and then shrinks it to it's original state (not all at once, but a nice transition), on page load. The goal is to create a balloon like effect for the object and then shrink it back to the original state

The solution I have been trying is using Bounce.js to add some keyframe animations to my elements. I perform one action on the containing element and a second on the child element, both of which have the same css properties, but it's not working.

Below is a link to a JS fiddle to show you what I have been trying.

Any tips on this are GREATLY appreciated :)

https://jsfiddle.net/

#container_one {
  width: 100px;
  height: 100px;
  margin-left: 40%;
  -webkit-animation: animation_one 3200ms linear both;
  animation: animation_one 3200ms linear both;
}
#one_box {
  width: 100px;
  height: 100px;
  margin-left: 40%;
  background-color: black;
  -webkit-animation: animation_two 1200ms linear both;
  animation: animation_two 1200ms linear both;
}
@-webkit-keyframes animation_one {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.15% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.25% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.29% {
    -webkit-transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.32% {
    -webkit-transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.36% {
    -webkit-transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  22.39% {
    -webkit-transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  32.81% {
    -webkit-transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  43.22% {
    -webkit-transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  64.06% {
    -webkit-transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.98% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@keyframes animation_one {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.15% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.25% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.29% {
    -webkit-transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.32% {
    -webkit-transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.36% {
    -webkit-transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  22.39% {
    -webkit-transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  32.81% {
    -webkit-transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  43.22% {
    -webkit-transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  64.06% {
    -webkit-transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.98% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
.animation-target {
  -webkit-animation: animation_two 4200ms linear both;
  animation: animation_two 4200ms linear both;
}
@-webkit-keyframes animation_two {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.47% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.57% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  31.65% {
    -webkit-transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.72% {
    -webkit-transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  37.79% {
    -webkit-transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.87% {
    -webkit-transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  48.81% {
    -webkit-transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.74% {
    -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  72.62% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  88.56% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@keyframes animation_two {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.47% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.57% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  31.65% {
    -webkit-transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.72% {
    -webkit-transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  37.79% {
    -webkit-transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.87% {
    -webkit-transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  48.81% {
    -webkit-transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.74% {
    -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  72.62% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  88.56% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
 <h1>Brand Balloon</h1>
<h3>A Social Experiment for the Digital Age</h3>
<div id="container_one">
  <div id="one_box"></div>
</div>
<script src='js/app.js'></script>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
adamscott
  • 823
  • 1
  • 10
  • 31

1 Answers1

1

You can trigger animation via a class added on onload via javascript.

You also might need to run animation 2 times 1 forwards and one backwards so it returns to original state. shorthand writing would be : 

animation : animation_one    3200ms     linear                 both       2                   alternate;
animation : -name           -duration   -timming-fucntion     -fill-mode  -iteration-count    -direction ;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

window.onload = function() {
  document.getElementById('one_box').className = 'balloon';
  document.getElementById('container_one').className = 'balloonbis';
};
#container_one {
  width: 100px;
  height: 100px;
  margin-left: 40%;
}
#one_box {
  width: 100px;
  height: 100px;
  margin-left: 40%;
  background-color: black;
}
/* animations and class */
.balloonbis {
  -webkit-animation: animation_one 3200ms linear both 2 alternate;
  animation: animation_one 3200ms linear both 2 alternate;
}
.balloon {
  -webkit-animation: animation_two 1200ms linear both2 alternate;
  animation: animation_two 1200ms linear both 2 alternate;
}
@-webkit-keyframes animation_one {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.15% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.25% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.29% {
    -webkit-transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.32% {
    -webkit-transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.36% {
    -webkit-transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  22.39% {
    -webkit-transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  32.81% {
    -webkit-transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  43.22% {
    -webkit-transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  64.06% {
    -webkit-transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.98% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@keyframes animation_one {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.15% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.25% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.29% {
    -webkit-transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.32% {
    -webkit-transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.36% {
    -webkit-transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  22.39% {
    -webkit-transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  32.81% {
    -webkit-transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  43.22% {
    -webkit-transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  64.06% {
    -webkit-transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.98% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
.animation-target {
  -webkit-animation: animation_two 4200ms linear both;
  animation: animation_two 4200ms linear both;
}
@-webkit-keyframes animation_two {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.47% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.57% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  31.65% {
    -webkit-transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.72% {
    -webkit-transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  37.79% {
    -webkit-transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.87% {
    -webkit-transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  48.81% {
    -webkit-transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.74% {
    -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  72.62% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  88.56% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@keyframes animation_two {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.47% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  28.57% {
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  31.65% {
    -webkit-transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.72% {
    -webkit-transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  37.79% {
    -webkit-transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.87% {
    -webkit-transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  48.81% {
    -webkit-transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.74% {
    -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  72.62% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  88.56% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
<h1>Brand Balloon</h1>
<h3>A Social Experiment for the Digital Age</h3>
<div id="container_one">
  <div id="one_box"></div>
</div>

DEMO

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129