为什么我的 css 旋转动画不起作用？

Question

请看看这个笨蛋：

https://plnkr.co/edit/hLd4TgrPjuMCXBqN?open=lib%2Fscript.js

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body onload="init()">

<div style="position: relative;">
    <input type="text" />
    <button onclick="buttonClick()">click me</button>
    
    <div class="loader-overlay-container">
        <div class="spinner">
        </div>
        <h3>Loading...</h3>
    </div>
</div>

  </body>
</html>

.loader-overlay-container {
  width: 100vw;
  height: 100vh;
  background-color: rgb(255, 255, 255, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.spinner {
    border-bottom: 3px solid grey;
    border-top: 3px solid grey;
    width: 50px;
    height: 50px;
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    @keyframes spin { 
      from { 
          transform: rotate(0deg); 
      }
      to { 
          transform: rotate(360deg); 
      }
    }
}

input {
    width: 200px;
}

function buttonClick() {
    var input = document.querySelector('input');
    alert(input.value);
}

我正在尝试创建一个位于页面内容之上的加载叠加层（用于当页面需要加载一些数据时）。叠加层基本上是一个固定的 div 覆盖整个屏幕并且是半透明的。在中央，有一个微调器，其下方带有“正在加载...”。我试图让微调器随着一些 css 动画旋转。它不工作。谁能看出问题所在？

Answer 1

CSS 代码中的错误是 keyframes 规则绝不能嵌套在 CSS 3. 它应该在 spinner 样式之外声明。请参阅下面更正后的代码片段！

function buttonClick() {
  var input = document.querySelector('input');
  alert(input.value);
}

.loader-overlay-container {
  width: 100vw;
  height: 100vh;
  background-color: rgb(255, 255, 255, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.spinner {
  border-bottom: 3px solid grey;
  border-top: 3px solid grey;
  width: 50px;
  height: 50px;
  border-radius: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

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

input {
  width: 200px;
}

<!doctype html>

<html>

<head>
  <link rel="stylesheet" href="lib/style.css">
  <script src="lib/script.js"></script>
</head>

<body onload="init()">

  <div style="position: relative;">
    <input type="text" />
    <button onclick="buttonClick()">click me</button>

    <div class="loader-overlay-container">
      <div class="spinner">
      </div>
      <h3>Loading...</h3>
    </div>
  </div>

</body>

</html>

为什么我的 css 旋转动画不起作用？

Why does my css rotate animation not work?

css

rotatetransform

css-animations