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

改变CSS中的缩放点

1 个答案: