Question

我正在尝试一些CSS动画，发现如果我从边界框的左下角进行缩放，则左侧会向右弹一点，然后再回到应该的位置。

其他所有看起来都正确。顶部和右侧看起来分别平滑，均匀地向底部和左侧移动，而底部则完全没有移动。

这是怎么回事？为什么左侧移动？

.shrink {
  border-style: solid;
  border-width: 1px;
  animation-name: title-min;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes title-min
{
  from { transform: scale(1); }
  to { transform: scale(.7); transform-origin: 0% 100% 0; }
}

<body>
  <h1 class="shrink">
    Hello
  </h1>
</body>

这发生在FF，Chrome，IE和Edge上。所以至少是一致的。：）

Answer 1

尝试将转换原点放在(test1,t)类上。

.shrink

.shrink {
  border-style: solid;
  border-width: 1px;
  transform-origin: bottom left;
  animation-name: title-min;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes title-min
{
  from { transform: scale(1); }
  to { transform: scale(.7); }
}

Answer 2

哦。 h！起点和终点之间的变换原点不同。这样做可以解决问题。

<body>
  <h1 class="shrink">
    Hello
  </h1>
</body>

.shrink {
  border-style: solid;
  border-width: 1px;
  animation-name: title-min;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes title-min
{
  from { transform: scale(1); transform-origin: 0% 100% 0; }
  to { transform: scale(.7); transform-origin: 0% 100% 0; }
}

缩放导致怪异的弹跳运动

2 个答案: