Transform Eigenschaft CSS3 skalieren, aber unten bleiben

Question

Hat jemand wissen, wie man ein Bild skaliert, aber mit unten bleiben? Unten ist mein Code, meine Bilder skalieren in der Mitte, aber ich brauche sie unten zu bleiben.

.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

Verwenden transform-origincenter bottom

Hier ist 0 Arbeits

Answer 2

Verwenden transform-origin Eigenschaft auf Elemente, auf denen ein transform angewendet wird.

Es definiert die "Mitte" Punkt der Transformation:

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

oder

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

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