Transform CSS3 property but stick to bottom

Question

Does anyone know how to scale an image but stick to the bottom? Below is my code, my images are scaled in the middle, but I need them to stay at the 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

DEMO works here

Answer 2

Use the transform-origin property for elements that apply transform .

It defines the "central" transformation point:

 -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; 

More details: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin