当您停止悬停对象时，我试图获得平滑的“悬停”动画。当您将鼠标悬停在整个按钮上时，超棒的字体图标会旋转。
我正在使用它:
@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，因为它是公共(public)/私有(private)网站的用户脚本，我不是所有者!
最佳答案
请尝试如下所示的转换并告诉我 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 - 用于悬停的平滑效果 CSS 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55565717/