prefixfree.min.js는 링크 태그와 함께 작동하지 않습니다.

저는 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 / prefixfree.min.js를 사용하여 키 프레임 CSS 규칙을 자동 접두사로 지정합니다.

따라서 위의 모든 CSS 규칙을 CSS 안에 넣고 다음과 함께 포함하면

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

자동 preifx가 작동하지 않습니다.

대신

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>

무엇이 문제입니까?

감사합니다... ;)