使用animation可实现文字缩放，通过@keyframes定义font-size变化或transform:scale实现视觉缩放，后者性能更优且不引发布局重排，推荐用于短时动效，同时需考虑可访问性与兼容性。
在CSS中，animation 可以用来实现 font-size 的动态变化，也就是让文字大小随时间缩放。这种效果常用于强调标题、加载提示或交互反馈。
要通过 animation 改变 font-size，需要先定义一个 @keyframes 动画，指定字体大小在不同阶段的值。
例如：
@keyframes scaleText {
0% {
font-size: 16px;
}
50% {
font-size: 24px;
}
100% {
font-size: 16px;
}
}
<p>.animated-text {
animation: scaleText 2s ease-in-out infinite;
}
这段代码会让元素的文字从 16px 放大到 24px 再缩回，每 2 秒循环一次。
直接改变 font-size 会引发布局重排（reflow），可能影响页面性能或其他元素的位置。如果只是视觉上的放大缩小，推荐使用 transform: scale()。
立即学习“前端免费学习笔记（深入）”；
示例：
@keyframes growText {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<p>.smooth-text {
display: inline-block; /<em> 注意：transform 对 inline 元素无效，需设为 inline-block 或 block </em>/
animation: growText 1.5s ease-out infinite;
}
这种方式只触发重绘（repaint），不会影响布局，动画更流畅。
使用 animation 缩放文字时，注意以下几点：
@media (prefers-reduced-motion: reduce) {
.animated-text {
animation: none;
}
}
基本上就这些。根据实际需求选择 font-size 还是 transform 来实现文字缩放，兼顾效果与性能。
以上就是在css中animation与font-size文字缩放的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
238
收藏
