变换属性 CSS3 缩放但粘在底部答案

【问题标题】：Transform Property CSS3 scale but stick at bottom变换属性 CSS3 缩放但粘在底部
【发布时间】：2012-11-20 05:08:19
【问题描述】：

有谁知道如何缩放图像但坚持底部？下面是我的代码，我的图像在中间缩放，但我需要它们贴在底部。

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

【问题讨论】：

标签： html css animation transform scale

【解决方案1】：

使用transform-origincenter bottom

这里正在工作DEMO

【讨论】：

【解决方案2】：

在应用了transform 的元素上使用transform-origin 属性。

它定义了变换的“中心”点：

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

或

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

【讨论】：

谢谢，transform-origin 放在@keyframes 上？
在关键帧或 .animation_scale img{...} 中。我会投票给第二个选项。