如何让我的 CSS 动画在不影响周围元素的情况下工作？答案

【问题标题】：How can I get my CSS animation to work without affecting the surrounding elements?如何让我的 CSS 动画在不影响周围元素的情况下工作？
【发布时间】：2023-02-23 02:20:15
【问题描述】：

如何在不影响周围元素的情况下让我的动画工作？在这种情况下，没有移动它周围的文本。

The JSFiddle

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

            @keyframes throb {
                0% {
                    width: 100px;
                    transform: rotate(0deg);
                }
                12.5% {
                    transform: rotate(45deg);
                }
                25% {
                    transform: rotate(90deg);
                }
                37.5% {
                    transform: rotate(135deg);
                }
                50% {
                    width: 105px;
                    transform: rotate(180deg);
                }
                62.5% {
                    transform: rotate(225deg);
                }
                75% {
                    transform: rotate(270deg);
                }
                87.5% {
                    transform: rotate(315deg);
                }
                100% {
                    width: 100px;
                    transform: rotate(360deg);
                }
            }
        </style>
        <title></title>
    </head>
    <body>
        <div id="test">
            <img src="wheel.png" width="100px" />
            <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>

【问题讨论】：

您在关键帧中将图像的 width 增加了 5px，这会导致偏移。您需要将其删除。

标签： html css

【解决方案1】：

影响布局的是动画中的 width 属性。解决这个问题，保持动画关键帧不变。将图像包裹在一个 div 中，使其具有与图像相同的宽度和高度，并在图像上设置 position: absolute。

绝对定位将元素从布局中分离出来

【讨论】：