css - 在 CSS 中更改比例点

Question

.bunch 是一张图片。有没有办法改变这个动画，让它从图像的底部开始缩放，这样它就出现在地板上？目前它从中间开始缩放。

.bunch {
  position: absolute;
  top: 250px;
  left:320px;
  -webkit-animation: flowerGrow 3s forwards;
}


@-webkit-keyframes flowerGrow {
  0% { -webkit-transform: scaleY(0)}
  100% { -webkit-transform: scaleY(1)}
}

提前致谢!

Answer 1

参见 transform-origin :

.bunch {
  position: absolute;
  top: 250px;
  left:320px;
  -webkit-animation: flowerGrow 3s forwards;
  -webkit-transform-origin: 50% 100%;
}

@-webkit-keyframes flowerGrow {
  0% { -webkit-transform: scaleY(0)}
  100% { -webkit-transform: scaleY(1)}
}

DEMO