如何连续旋转图标？（关键帧不起作用）

Question

我试图让我的icon旋转像下面一样连续，但它没有旋转或做任何事情。

我知道关于这个主题也有类似的问题，但其中的每个解决方案都不适合我。

我正在与Vue 3、Bootstrap 5.3和 一起工作Chrome。

这里出了什么问题？感谢您的帮助！

.rotating-icon {
  animation: transform-icon 5s linear infinite;
}

@keyframes transform-icon {
  from {
    transform: rotate(0deg) !important;
  }
  to {
    transform: rotate(359deg) !important;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">
  <div class="col-1">
    <i class="bi bi-hourglass-top rotating-icon"></i>
  </div>

Answer 1

需要制作元素 display: inline-block;，并且不能在规则中包含重要的元素。

.rotating-icon {
  animation: transform-icon 5s infinite linear;
  display: inline-block;
}

@keyframes transform-icon {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">
<div class="col-1">
  <i class="bi bi-hourglass-top rotating-icon"></i>
</div>