Question

所以我有一个旋转图标的jfiddle，它在鼠标悬停时旋转时会变大：https://jsfiddle.net/clotoro/29cj137x/73/

<div class="rotate-wrapper">
 <span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
   <span class="resize-hover">
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
   </span>
 </span>
</div>

.rotate-wrapper:hover .fa-stack {
color: #dd4814;
transition: 1.6s;
transform: rotateY(360deg);
font-size: 6em;
}

.wrapper {
display: inline-block;
overflow: hidden;
text-align: center;
}

.rotate-wrapper:hover .fa-stack {
color: #dd4814;
transition: 1.6s;
transform: rotateY(360deg);
font-size: 6em;
}

.wrapper {
display: inline-block;
overflow: hidden;
text-align: center;
}

.resize-hover {
font-size: 140%
}

我希望在鼠标悬停结束时再次播放旋转动画，并将其缩小回原始大小，而不是仅仅恢复大小。

有什么想法吗？非常感谢你的帮助！

Answer 1

在元素上设置transition，而不是:hover状态，并设置初始transform值，以便在鼠标移出后转换回元素：

＆＃13;

.rotate-wrapper .fa-stack {
  transition: 1.6s;
  transform: rotateY(0deg);
}
.rotate-wrapper:hover .fa-stack {
  color: #dd4814;
  transform: rotateY(360deg);
  font-size: 6em;
}
.wrapper {
  display: inline-block;
  overflow: hidden;
  text-align: center;
}
.resize-hover {
  font-size: 140%
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="rotate-wrapper">
  <span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <span class="resize-hover">
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
  </span>
</span></div>

＆＃13;

鼠标悬停时CSS图标旋转第二个动画

1 个答案: