javascript - 鼠标关闭时的 CSS 图标旋转第二个动画

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 值以转换回鼠标移出后:

.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%
}

<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>