Transform Property CSS3 scale but stick at bottom

Question

Did anyone know how to scale an image but stick with bottom? Below is my code, my images scale at middle, but I need them to stick at bottom.

.animation_scale{
position:absolute;
top:150px;
left:55px;
display:block;
z-index:-10;
bottom : 0;}

.animation_scale img{
animation-name:animation_scale;
animation-duration:1s;
animation-timing-function:ease;
animation-delay:0s;
animation-iteration-count:1;
animation-direction:alternate;
animation-play-state:running;
animation-fill-mode: forwards;

    /* Firefox: */
-moz-animation-name:animation_scale;
-moz-animation-duration:1s;
-moz-animation-timing-function:ease;
-moz-animation-delay:0s;
-moz-animation-iteration-count:1;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
-moz-animation-fill-mode: forwards;

/* Safari and Chrome: */
-webkit-animation-name:animation_scale;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode: forwards;}

@keyframes animation_scale {
0%   {
-webkit-transform:  scale(0.2) translate(0px);
-moz-transform:  scale(0.2) translate(0px);
-o-transform:  scale(0.2) translate(0px);}

100% {
-webkit-transform: scale(1.0) skew(0deg) translateY(-10px);
-moz-transform: scale(1.0) skew(0deg) translateY(-10px);
-o-transform: scale(1.0) skew(0deg) translateY(-10px);}}

@-moz-keyframes animation_scale /* Firefox */
{0%   {
-moz-transform:  scale(0.2) translate(0px);}

100% {
-moz-transform:  scale(1.0) translateY(-10px);}}

@-webkit-keyframes animation_scale{ /* Safari and Chrome */

0%   {
-webkit-transform:  scale(0.2) translate(0px);}

100% {
-webkit-transform:  scale(1.0) translateY(-10px);}}

Answer 1

Use transform-origin center bottom

Here is working DEMO

Answer 2

Use transform-origin property on elements on which a transform is applied.

It defines the "center" point of the transformation :

-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;

or

-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-o-transform-origin: center bottom;
transform-origin: center bottom;

See more : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin