代码之家 › 专栏 › 技术社区 › Adrian

缩放导致奇怪的反弹运动

css-animations css

Adrian · 技术社区 · 7 年前

其他一切看起来都是正确的。顶部和右侧看起来分别平稳地向底部和左侧移动,而底部则完全不移动。

这里发生了什么?为什么左边在动?

.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>

2 回复 | 直到 7 年前

Scopestyle 7 年前

尝试将变换原点放置在 .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); }
}

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

Adrian 7 年前

哦。哼!变换起点和终点不同。这样做可以解决问题。

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

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

9 月前

Mass · 如何在Tailwind CSS v4中创建配置

9 月前

magenta placenta · 将css变量合并为一个变量

9 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

10 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

10 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

10 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

10 月前

Luckkks · 过渡色工作不正常

10 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

10 月前