Question

我会像这样制作动画：

开始：大字体
动画：减小字体大小
结尾：随意的字体大小

问题：动画元素会移动其他元素。如何避免呢？

HTML

wwwroot

CSS

<div class='center'>
  <div class="container">
    <span>1</span>
    <span>
      <span class='animation'>2</span>
      <span> 3 </span>
      <span>4</span>
    </span>
    <span>5</span>
  </div>
</div>

Answer 1

您可以通过动画transform: scale()而不是font-size来实现此目的。通过一些简单的数学运算，您可以使用要动画化的字体大小来计算缩放比例：70/16 = 4.375。

这也具有性能优势，因为transform is a GPU-accelerated CSS property而font-size不是。

编辑：请注意，必须声明动画元素inline-block才能使transform: scale()正常工作。

.center{
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;

}
.bar-container{

  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  grid-gap: 20px;

  padding: 3px 10px 3px 10px;
  margin: 0 10px 0 10px;
}

.animation{
  display: inline-block;
  animation: winner-animation-scale 2s ease-in 0s infinite normal none;
}

@keyframes winner-animation{
  0% { font-size: 70px }
  100% { font-size: 16px }
}

@keyframes winner-animation-scale {
  0% { transform: scale(4.375); /* 70/16 */ }
  100% { transform: scale(1); }
}

<div class='center'>
  <div class="container">
    <span>1</span>
    <span>
      <span class='animation'>2</span>
      <span> 3 </span>
      <span>4</span>
    </span>
    <span>5</span>
  </div>
</div>

Answer 2

编辑/完全重写：

1。）更改HTML结构，以使5个数字成为array<int, 5> niz;的直接子代（即，删除包裹内部三个数字的.container）

2。）将容器的span更改为grid-template-columns（即现在是5个子元素，而不是3个子元素）

3。）向容器的所有直接子代添加固定宽度和repeat(5, auto);：

text-align: center

.container>span {
  text-align: center;
  width: 30px;
}

.center {
  height: 100vh;
  display: grid;
  align-items: center;
}

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  align-items: center;
  align-content: center;
  grid-gap: 20px;
  padding: 3px 10px 3px 10px;
  margin: 0 10px 0 10px;
}

.container>span {
  text-align: center;
  width: 30px;
}
.animation {
  animation: winner-animation 2s ease-in 0s 2 normal none;
}

@keyframes winner-animation {
  0% {
    font-size: 70px
  }
  100% {
    font-size: 16px
  }
}

减少字体大小的动画-如何避免移动兄弟姐妹

2 个答案: