CSS3: Transforming ONLY during Transition - css

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.

Answer 2

U can use the #keyframe animation in css for this, just take a look: https://css-tricks.com/snippets/css/keyframe-animation-syntax/
And here is a exemple what i made with keyframes and jquery animate:
Css
#box{
display: block;
background: red;
width: 300px;
height: 300px;
border-radius: 100%;
position: relative;
}
#keyframes change_form {
0% {
width: 300px;
}
50% {
border-radius: 0%;
width: 50px;
height: 100px;
}
100% {
width: 300px;
height: 300px;
}
}
Jquery
$(document).ready(function(){
window.setTimeout(function(){
$( "#box" ).animate({
"top":"+=134px"
,
},{
step: function(now) {
if (now >= 11) {
$("#box").css({'transition':'all linear 1s', 'animation':'change_form ease 2s '});
}
} }
);
}, 2000);
});
In a simple Div
<div id="box"></div>
Just a example what i make to show u how to make this effect, u can make this only with css, just putting the 'animation' in your div