Question

当您停止将对象悬停时，我正在尝试获得平滑的“悬停”动画。当您将鼠标悬停在整个按钮上时，字体超赞的图标会旋转。

我正在使用它：

@keyframes roll {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}

.p-navEl a:first-child:hover::before {
    animation: roll .5s linear infinite;
}

导航栏第一个按钮的HTML

<ul class="p-nav-list js-offCanvasNavSource">
  <li>
    <div class="p-navEl is-selected" data-has-children="true">
      <a href="#" class="p-navEl-link p-navEl-link--splitMenu " data-nav-id="forums">Forums</a>
      <a data-xf-key="1" data-xf-click="menu" data-menu-pos-ref="< .p-navEl" data-arrow-pos-ref="< .p-navEl" class="p-navEl-splitTrigger" role="button" tabindex="0" aria-label="Basculer en mode étendu" aria-expanded="false" aria-haspopup="true"></a>
      <div class="menu menu--structural" data-menu="menu" aria-hidden="true">
        <div class="menu-content">
          <a href="#" class="menu-linkRow u-indentDepth0 js-offCanvasCopy " data-nav-id="newPosts">Nouveaux messages</a>
          <a href="#" class="menu-linkRow u-indentDepth0 js-offCanvasCopy " data-nav-id="findThreads">Trouver des discussions</a>
          <a href="#" class="menu-linkRow u-indentDepth1 js-offCanvasCopy " data-nav-id="yourThreads">Vos discussions</a>
          <a href="#" class="menu-linkRow u-indentDepth1 js-offCanvasCopy " data-nav-id="contributedThreads">Discussions avec vos messages</a>
          <a href="#" class="menu-linkRow u-indentDepth1 js-offCanvasCopy " data-nav-id="unansweredThreads">Discussions sans réponse</a>
          <hr class="menu-separator">
          <a href="#" class="menu-linkRow u-indentDepth0 js-offCanvasCopy " data-nav-id="watched">Suivies</a>
          <a href="#" class="menu-linkRow u-indentDepth1 js-offCanvasCopy " data-nav-id="watchedThreads">Discussions suivies</a>
          <a href="#" class="menu-linkRow u-indentDepth1 js-offCanvasCopy " data-nav-id="watchedForums">Forums suivis</a>
          <hr class="menu-separator">
          <a href="#" class="menu-linkRow u-indentDepth0 js-offCanvasCopy " data-nav-id="searchForums">Rechercher dans les forums</a>
          <a href="#" class="menu-linkRow u-indentDepth0 js-offCanvasCopy " data-xf-click="overlay" data-nav-id="markForumsRead">Marquer les forums comme lus</a>
        </div>
      </div>
    </div>
  </li>
</ul>

预览

将“ FORUMS”之前的气泡悬停时会旋转。但是当您停止将动画悬停时，我希望动画保持平滑

但是当您不再悬停链接时，动画将被残酷地停止。

有什么主意吗？

我无法共享原始CSS，因为它是公共/私有网站的用户脚本，我不是所有者！

Answer 1

请尝试进行如下所示的转换，并让我知道fiddle！。

HTML

<body bgcolor="#333">
  <div class="display-center">
     <span>Rotate</span>
  </div>
</body>

Css

.display-center{
  display:flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  width: 100%;
  background-color: white;
}
span {
  background-color: gray;
  padding: 10px;
  border-radius: 8px;
  color: #222;
  text-align: center;
    transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
span:hover {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

流畅的CSS动画效果，可悬停

1 个答案: