CSS 动画 - 解析器错误答案

【问题标题】：CSS Animation - Parser ErrorCSS 动画 - 解析器错误
【发布时间】：2015-04-19 09:32:01
【问题描述】：

我在尝试使用 CSS 动画时遇到解析器错误。

“/”应用程序中的服务器错误。

解析器错误

描述：解析服务此请求所需的资源时出错。请查看以下特定的解析错误详细信息并适当地修改您的源文件。

解析器错误消息：“-”在代码块的开头无效。只有标识符、关键字、cmets、"(" 和 "{" 是有效的。

<html>
<head>
.spin {
        -webkit-animation: spin .2s infinite linear;
        -moz-animation: spin .2s infinite linear;
        -o-animation: spin .2s infinite linear;
        animation: spin .2s infinite linear;
        -webkit-transform-origin: 50% 58%;
        transform-origin: 50% 58%;
        -ms-transform-origin: 50% 58%; /* IE 9 */
    }

    @-moz-keyframes spin {
        from {
            -moz-transform: rotate(0deg);
        }

        to {
            -moz-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spin {
        from {
            -webkit-transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }



</style>
</head>
<body>
<h1 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
<span class="glyphicon glyphicon-send spin"></span>
<span class="glyphicon glyphicon-star spin"></span>
</h1>

<h3 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
<span class="glyphicon glyphicon-send spin"></span>
<span class="glyphicon glyphicon-star spin"></span>
</h3>

<h6 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
<span class="glyphicon glyphicon-send spin"></span>
<span class="glyphicon glyphicon-star spin"></span>
</h6>
</body>
</html>

【问题讨论】：

您好像错过了<style> 标签

标签： html css parsing

【解决方案1】：

在 head 标签下方和 CSS 代码上方添加 <style type="text/css">。看起来你已经在底部有结束标签了。

【讨论】：