CSS @keyframes 或 SMIL，动画选择哪一个？答案

【问题标题】：CSS @keyframes or SMIL, which one choose for an animation?CSS @keyframes 或 SMIL，动画选择哪一个？
【发布时间】：2019-11-20 01:22:18
【问题描述】：

我目前正在开发一个网站，我必须在这个shape（使用 svg 创建）上制作动画。对于动画，我想做一些清醒的事情，当我们将鼠标悬停在正确的形状上时，只需 x 平移它以获得像that 这样的矩形。

HTML：

        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="12.5em" preserveAspectRatio="xMaxYMin slice" class="spaceBetweenButton" >
            <polygon fill="#00a8f3" points="0 0, 83 0, 0 83"/>

            <foreignObject width="24em" height="1em">
                <textArea readonly xmlns="http://www.w3.org/1999/xhtml" style="background-color: transparent; border: none; width: 24em; height: 9em; padding-top: 0.5em; padding-bottom:0;line-height: 1.1em" class="textFont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in interdum enim. Morbi enim sem</textArea>
            </foreignObject>

            <polygon fill="#00a8f3" class="test" points="85 0, 100 0, 100 100, 0 85"/>  

            <foreignObject width="24em" height="7em">
                <textArea readonly xmlns="http://www.w3.org/1999/xhtml" style="background-color: transparent; border: none; width: 5.5em; height: 10em; line-height: 0.9em" class="buttonFontRight test">Lorem ipsum dolor sit</textArea>
            </foreignObject>

        </svg>

我的问题是，我不知道在 CSS @keyframes 和 SMIL 之间选择哪一个来移动正确形状的整体以及两者的区别。

感谢您的帮助。

瓦伦丁。

【问题讨论】：

SMIL 已被 AFAIK 弃用，因此关键帧将是最佳的。 - 见stackoverflow.com/questions/30965580/…
SMIL 未被弃用。 Chrome 宣布弃用，然后在 hoo hah 之后，宣布他们毕竟没有弃用它。

标签： html css svg

【解决方案1】：

如果您只有一个简单的 X 翻译，我建议您使用 transform: translateX(-50px)（或您需要多少像素）。但是，如果您需要为某些内容设置动画，则应该使用关键帧。

【讨论】：