Transform Property CSS3 scale but stick at bottom

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);}} ```