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

CSS Icon Rotation Second Animation On Mouseoff

本文关键字：第二个 动画 图标 旋转 鼠标 CSS      更新时间：2023-09-26

所以我有一个旋转图标的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%
}

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

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

在元素上设置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>

相关文章：