如何让两种CSS旋转动画在span元素上正常生效？

问题根源 #

1. 行内元素限制：<span>是行内元素，CSS transform 属性仅对块级元素或行内块元素生效，行内元素默认不支持几何变换。
2. CSS语法错误：@-webkit-keyframes .antirotating 中多了一个.，导致WebKit内核浏览器（如Chrome、Safari）无法识别这个动画名称。

修复步骤 #

• 给span元素添加display: inline-block或display: block，让它支持transform变换。
• 修正逆时针动画的WebKit前缀语法，去掉多余的.。
• 可选：给span设置合适的字体大小、间距，让旋转效果更明显。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clock VS countclock</title>

    <style>
        /* 顺时针旋转动画 */
        @-webkit-keyframes rotating {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes rotating {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .rotating {
            display: inline-block;
            animation: rotating 2.5s linear infinite;
            font-size: 80px;
            margin: 0 20px;
        }

        /* 逆时针旋转动画 - 修复语法错误 */
        @-webkit-keyframes antirotating {
            from {
                transform: rotate(360deg);
            }
            to {
                transform: rotate(0deg);
            }
        }

        @keyframes antirotating {
            from {
                transform: rotate(360deg);
            }
            to {
                transform: rotate(0deg);
            }
        }

        .antirotating {
            display: inline-block;
            animation: antirotating 5s linear infinite;
            font-size: 80px;
            margin: 0 20px;
        }
    </style>
</head>

<body>
    <span id="content2display1" class="rotating"></span>
    <span id="content2display2" class="antirotating"></span>

    <script>
        function foo() {
            document.getElementById('content2display1').innerHTML = "hello";
            document.getElementById('content2display2').innerHTML = "world";
        }

        foo();       
        setInterval(foo, 5000);
    </script>
</body>

</html>

额外优化说明 #

• 简化了CSS代码，现代浏览器已经不需要过多的前缀（如-moz-、-ms-、-o-），保留-webkit-即可兼容大部分旧版WebKit浏览器。
• 把setInterval("foo();", 5000)改成setInterval(foo, 5000)，避免字符串解析带来的性能问题和潜在风险。
• 给span添加了margin，让两个旋转文本不会挤在一起。

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