prefixfree.min.js不适用于链接标记。

Question

我正在接近HTML5和css3的世界.问题是..。

我有这个风格的规则

        html {
            height: 100%;
        }
        body {
            height: 100%;
            background: #AD3434;
        }
        .login-form {
            margin: 100px auto;
            width: 100px;
            height: 50px;
            perspective: 600;
            position: relative;
        }


        .login-form .s {
            animation: close-shadow 1.2s ease 0.19s 1 alternate forwards;
        }
        .login-form .f {
            animation: close 1.5s ease 1 alternate forwards;
        }
        .login-form .f .front {
            animation: close-front 1.5s ease 1 alternate forwards;
        }
        .login-form .f .back {
            animation: close-back 1.5s ease 1 alternate forwards;
        }
        .login-form:hover .s {
            animation: shadow 1.2s ease 1 alternate  forwards ;
        }
        .login-form:hover .f {
            animation: open 1.5s ease 1 alternate forwards;
        }
        .login-form:hover .f .front {
            animation: open-front 1.5s ease 1 alternate forwards, shadow2 0.4s ease 1 alternate forwards;
        }
        .login-form:hover .f .back {
            animation: open-back 1.5s ease 1 alternate forwards;
        }
        .f {
            transform-style: preserve-3d;
            transform-origin: 0 100%;
            transform: rotatey(0deg);
            cursor: pointer;
            position: relative;
            width: 100px;
            height: 50px;
        }
        .f .front {
            position: absolute;
            width: 100px;
            height: 50px;
            background: #AD3434;
            backface-visibility: hidden;
            font: 14px sans-serif;
            text-transform: uppercase;
            line-height: 50px;
            text-align: center;
            color: #fff;
        }
        .f .back {
            width: 100px;
            height: 50px;
            background: #AD3434;
            transform-origin: 0 100%;
            transform: rotateY(180deg);
            position: absolute;
            backface-visibility: hidden;
            left: 100px;
        }
        .s {
            width: 100px;
            height: 50px;
            background: #AD3434;
            position: absolute;
            top: 0;
            z-index: -1;
        }
        .pass,
        .username {
            margin: 4px auto;
            width: 92px;
        }
        .pass label,
        .username label {
            display: block;
            font: 10px sans-serif;
            color: #E9C9C9;
        }
        .pass input,
        .username input {
            height: 16px;
            width: 80px;
            padding: 0 4px;
            margin-top: 2px;
            border: none;
            background: #C6AEAE;
            color: #fff;
        }
        .pass input:focus,
        .username input:focus {
            outline: none;
        }
        @keyframes open {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(-180deg);
            }
        }
        @keyframes close {
            0% {
                transform: rotateY(-180deg);
            }
            100% {
                transform: rotateY(0deg);
            }
        }
        @keyframes open-front {
            0% {
                background: #AD3434;
            }
            5% {
                background: #B23838;
            }
            50% {
                background: #C13D3D;
            }
            100% {
                background: #C13D3D;
            }
        }
        @keyframes open-back {
            0% {
                background: #9D2F2F;
            }
            50% {
                background: #A63232;
            }
            95% {
                background: #AA3333;
            }
            100% {
                background: #AD3434;
            }
        }
        @keyframes shadow {
            0% {
                box-shadow: inset 125px 0 30px -20px rgba(0, 0, 0, 0.3);
            }
            100% {
                box-shadow: inset 0px 0 10px 0 rgba(0, 0, 0, 0);
            }
        }
        @keyframes shadow2 {
            0% {
                box-shadow: 7px 0 10px -7px rgba(0, 0, 0, 0.3);
            }
            100% {
                box-shadow: 0px 0 10px 0 rgba(0, 0, 0, 0);
            }
        }
        @keyframes close-front {
            0% {
                background: #C13D3D;
            }
            5% {
                background: #C13D3D;
            }
            50% {
                background: #B23838;
            }
            100% {
                background: #AD3434;
            }
        }
        @keyframes close-back {
            0% {
                background: #AD3434;
            }
            50% {
                background: #A03030;
            }
            95% {
                background: #A03030;
            }
            100% {
                background: #9D2F2F;
            }
        }
        @keyframes close-shadow {
            0% {
                box-shadow: inset 0px 0 10px 0 rgba(0, 0, 0, 0);
            }
            100% {
                box-shadow: inset 125px 0 20px -20px rgba(0, 0, 0, 0.3);
            }
        }

我使用js/ prefixing fre.min.js自动为键帧css规则添加前缀。

因此，如果我将上述所有css规则放入css中，并将其包含在

<link type="text/css" rel="stylesheet" href="css/style.css">

自动预告片不起作用，

相反，

当我将上面的代码放在html页面内的样式标签中时，自动前缀工作，页面看起来是对的。

更清楚的是：

这行得通

 <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
         <!-- the above code -->

    </style>
    <script src="js/prefixfree.min.js"></script>
</head>

这样做是行不通的：

<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="css/login.css">
    <script src="js/prefixfree.min.js"></script>
</head>

有什么问题吗？

谢谢..。;)

Answer 1

首先请原谅我糟糕的英语><

我遇到了同样的问题，并搜索它，但没有解决办法。我想我应该看看作者的演示，我发现他的用法和我没有什么不同，所以我试着更新'prefixfree.min.js'，它比我的要大一些，而且出乎意料的有意义

希望它能帮到你