Transition animation need some CSS - html

Question

I am trying to make a page load transition effective div. This is my DEMO FULL PAGE full page from codepen.io and also this is example page with code DEMO WITH CODE
If you open the demo full page then you can see there is a one image and this image opening with transition animation. But there is something went wrong.
When page load the image opening transition but it is opening up to bottom . I want to open it in the middle, without any deviation.
Anyone can help me in this regard ? How can i fixed it ?
This is my CSS code:
.test {
margin: 0px auto;
width: 200px;
height: auto;
margin-top: 50px;
}
.testtransition {
transform: scale(1.2);
width: 200px;
height: 200px;
margin: 0px auto;
margin-top: 50px;
overflow: hidden;
border-radius: 50%;
}
.testtransition img {
width: 100%;
max-width: 200px;
max-height: 200px;
opacity: 1;
-moz-animation: scale 0.8s;
/* Firefox */
-webkit-animation: scale 0.8s;
/* Safari and Chrome */
-o-animation: scale 0.8s;
border-radius: 50%;
-webkit-animation: scale 0.9s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: scale 0.9s;
/* Firefox < 16 */
-ms-animation: scale 0.9s;
/* Internet Explorer */
-o-animation: scale 0.9s;
/* Opera < 12.1 */
animation: scale 0.9s;
}
#keyframes scale {
from {
width: 20px;
opacity: 0;
}
to {
width: 200px;
opacity: 1;
}
}
#-moz-keyframes scale {
/* Firefox */
from {
width: 20px;
opacity: 0;
}
to {
width: 200px;
opacity: 1;
}
}
#-webkit-keyframes scale {
/* Safari and Chrome */
from {
width: 20px;
opacity: 0;
}
to {
width: 200px;
opacity: 1;
}
}
#-o-keyframes scale {
/* Opera */
from {
width: 20px;
opacity: 0;
}
to {
width: 200px;
opacity: 1;
}
}

Answer 1

Here's a working pen. A summary of my changes:
Added text-align: center on .testtransition to keep the image centered
Added width, height, and padding to the animation to keep the image centered throughout the animation
Removed the width parameter from the img tag to keep things simple :)

Answer 2

This should do the trick! You need to set a from and to in each animation.
http://codepen.io/anon/pen/GJZvJB
.testtransition {
width: 200px;
height: 200px;
margin: 0px auto;
margin-top: 50px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
.testtransition img {
-webkit-animation: scaleAnim 1s;
-moz-animation: scaleAnim 1s;
-o-animation: scaleAnim 1s;
}
#-webkit-keyframes scaleAnim {
from { -webkit-transform: scale(0) }
to { -webkit-transform: scale(1) }
}
#-moz-keyframes scaleAnim {
from { -moz-transform: scale(0) }
to { -moz-transform: scale(1) }
}
#-o-keyframes scaleAnim {
from { -o-transform: scale(0)}
to { -o-transform: scale(1)}
}
You may have to play with the initial image to maintain an attractive circle, for now i've added backface-visibility.