html - 减小字体大小动画 - 如何避免移动 sibling

Question

我会制作这样的动画:

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

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

编辑: https://codepen.io/anon/pen/LXVVPR

HTML

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

CSS

.center{
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;

}
.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{
  animation: winner-animation 2s ease-in 0s 2 normal none;    
} 

@keyframes winner-animation{
  0% { font-size: 70px }
  100% { font-size: 16px }
}

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>