我会制作这样的动画:
- 开始:大字体
- 动画:减小字体大小
- 结尾:随意的字体大小
问题:动画元素会移动其他元素。如何避免?
编辑: 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 }
}
最佳答案
您可以通过动画 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>
关于html - 减小字体大小动画 - 如何避免移动 sibling ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53159439/