如何让CSS动画运行时不影响周围元素？避免文本位移

你的问题出在动画中修改了width属性——这个属性会改变元素的布局尺寸，触发Flex容器重新计算布局，导致旁边的文本被挤得位移。而transform属性是在元素的布局盒子之外做视觉变换，完全不会影响周围元素的布局。

解决方法很简单，用transform: scale()替代width的修改，同时确保元素的基础尺寸固定：

1. 保留旋转动画，移除所有对width的动画修改
2. 用transform: scale(1.05)实现视觉上的放大效果（对应你原来的width从100px到105px的比例）
3. 确保img元素的基础尺寸固定，避免布局空间变化

修改后的完整代码：

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href="" />
        <style type="text/css">
            html, body {
                margin: 0;
                padding: 0;
                color: #131313;
                font-family: sans-serif;
            }

            #content {
                margin: 2em;
            }

            #test {
                margin: 2em 2em 0.25em 2em;
                display: flex;
                flex-direction: row;
                align-items: center;
            }

            #test > div:last-child {
                margin: 0 2em;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }

            .highlight {
                color: #00FFFF;
            }

            .throb {
                animation-name: throb;
                animation-duration: 1500ms;
                animation-iteration-count: infinite;
                animation-timing-function: ease-in;
                /* 固定基础尺寸，确保布局空间不变 */
                width: 100px;
                height: auto;
            }

            @keyframes throb {
                0% {
                    transform: rotate(0deg) scale(1);
                }
                12.5% {
                    transform: rotate(45deg) scale(1);
                }
                25% {
                    transform: rotate(90deg) scale(1);
                }
                37.5% {
                    transform: rotate(135deg) scale(1);
                }
                50% {
                    transform: rotate(180deg) scale(1.05);
                }
                62.5% {
                    transform: rotate(225deg) scale(1);
                }
                75% {
                    transform: rotate(270deg) scale(1);
                }
                87.5% {
                    transform: rotate(315deg) scale(1);
                }
                100% {
                    transform: rotate(360deg) scale(1);
                }
            }
        </style>
        <title></title>
    </head>
    <body>
        <div id="test">
            <img src="wheel.png" />
            <div>
                <div>the quick brown fox jumps over the lazy dog</div>
                <div>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</div>
            </div>
        </div>
        <script type="text/javascript">
            const RECORD = document.querySelector('img');
            RECORD.classList.add('throb');
        </script>
    </body>
</html>

关键说明：

• transform: scale(1.05)让元素视觉上放大5%，但它的布局宽度还是固定的100px，不会挤压旁边的文本
• 给.throb类添加固定的width:100px，确保元素初始布局空间稳定，避免img标签的默认尺寸变化影响布局

内容的提问来源于stack exchange，提问作者Brian