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

【问题标题】：Why does my css rotate animation not work?为什么我的 css 旋转动画不起作用？
【发布时间】：2021-08-04 22:56:19
【问题描述】：

请看看这个 plunker：

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 动画一起旋转。它不工作。谁能看出问题？

【问题讨论】：

如果是纯 CSS .think 关键帧应该在外面
你只需要修复旋转动画对吗？

标签： css css-animations rotatetransform

【解决方案1】：

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

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 类之外。此代码最初取自一个 scss 文件。我没有考虑从 scss 迁移到 css 时所需的更改。感谢您指出。