CSS3: Transforming ONLY during Transition

Question

I know we can transform shape (e.g. circle to square) from one state (e.g. top: 0) to another state (e.g. top: 20px). But I'm not sure how we can keep the shape at both states intact (i.e. keeps it circled @ top: 0 and top: 20px), but ONLY during transition I want to transform its shape. An example of what I want to achieve is somewhat like this:

Answer 1

Here's a pure css version of what you want. It transforms only during the transition. Not hard at all. Just use keyframes to specify what properties you want changed and when.

The HTML

  <div class="childAnimated"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>

And the CSS

.child {
  border: .5em solid white;
  width: 3em;
  height: 3em;
  border-radius: 5em;
  margin-bottom: 1em;
}

.childAnimated {
  position: fixed;
  top: 1em;
  left: 1em;
  z-index: 999;
  background-color: white;
  width: 3em;
  height: 3em;
  border-radius: 5em;
  -webkit-animation: gooAnim 4s infinite;
}

@-webkit-keyframes gooAnim {
  0%   { top: 1em; }
  25%   { top: 3.8em; left: 1.5em; width: 2em; height: 2em; }
  50%  { top: 6em; width: 3em; height: 3em; left: 1em;}
   75%   { top: 8.8em; left: 1.5em; width: 2em; height: 2em; }
  100% { top: 11em; }
}

If you want to see it in action, here's the codepen. Run it in Chrome if you can. http://codepen.io/shuffguy/pen/JdLXeM

This was a quick example, but if you play around with the keyframe resizing properties you can definitely emulate that example exactly with keyframes.