悬停时启动旋转动画,但悬停时仍会完成

Posted

技术标签:

【中文标题】悬停时启动旋转动画,但悬停时仍会完成【英文标题】:Spin animation initiated on hover but still completes when off hover 【发布时间】:2018-05-29 01:01:04 【问题描述】:

所以我已经完成了一些简单的代码来当你将鼠标悬停在容器上时旋转内部元素。

当鼠标悬停在容器上时,这就像我想要的那样工作,但是当鼠标不再在容器内时,旋转停止。

如何完成一个完整的旋转,由鼠标悬停启动,即使鼠标离开容器,它也会完成一个完整的旋转,最好只使用 CSS。

当前代码:

html

@keyframes spin 
  0%  transform: rotate(0deg); 
  25%  transform: rotate(-90deg); 
  50% transform: rotate(-180deg); 
  75%  transform: rotate(-270deg); 
  100%  transform: rotate(-360deg); 


.logo:hover > .spin 
  animation: spin 450ms;


.logo
  background: #eee;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 110px;
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#">
  <div class="logo">
    <i class="fa fa-globe fa-2x spin" aria-hidden="true"></i>
  </div>
</a>

【问题讨论】:

【参考方案1】:

这应该工作! :)

jQuery(document).ready(function()
jQuery(".logo").hover(function()
   var logo = jQuery(this);
  if(!logo.hasClass('hover'))
     logo.addClass('hover');
     setTimeout(function()
        logo.removeClass('hover');
     , 450);
  
, function());
);
@keyframes spin 
  0%  transform: rotate(0deg); 
  25%  transform: rotate(-90deg); 
  50% transform: rotate(-180deg); 
  75%  transform: rotate(-270deg); 
  100%  transform: rotate(-360deg); 


.logo.hover > .spin 
  animation: spin 450ms;


.logo
  background: #eee;
  width: 100px;
  height: 100px;
  text-align: center;
  li
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#">
  <div class="logo">
    <i class="fa fa-globe fa-2x spin" aria-hidden="true"></i>
  </div>
</a>

【讨论】:

这行得通!我确实希望有某种 CSS 选项。谢谢! 没问题!很高兴我能帮忙:)

以上是关于悬停时启动旋转动画,但悬停时仍会完成的主要内容,如果未能解决你的问题,请参考以下文章

JS动画在悬停时旋转

CSS 动画 - 每次悬停时进一步旋转 45 度

悬停时的CSS 3旋转动画[重复]

jQuery没有动画不透明度,但会在悬停时旋转元素

悬停时旋转时带有 CSS 多边形的不需要的边框

鼠标悬停时的CSS3背景旋转动画