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>