圖片沒有顯示後懸停

Question

我試圖表現出的動畫動畫，只要將光標懸停都留下&的圖像鏈接，但由於某種原因，每當我的光標離開圖像，沒有動畫出現：

.soc { 
 
    display: block; 
 
    font-size: 0; 
 
    list-style: none; 
 
    margin: 0; 
 
    text-align: center; 
 
} 
 
.soc li { 
 
    display: inline-block; 
 
    margin: 12px; 
 
    margin: 1.2rem; 
 
} 
 
.soc a, .soc svg { 
 
    display: block; 
 
} 
 
.soc a { 
 
    position: relative; 
 
    height: 50px; 
 
    height: 5.0rem; 
 
    width: 50px; 
 
    width: 5.0rem; 
 
} 
 
.soc svg { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.soc em { 
 
    font-size: 14px; 
 
    line-height: 1.5; 
 
    margin-top: -0.75em; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 50%; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
.icon-twitter:hover { 
 
    border-radius: 100%; 
 
    color: #fff; 
 
    fill: #fff; 
 
    -webkit-transform: scale(1.25); 
 
      transform: scale(1.25); 
 
    -webkit-transition: background-color 0.5s, -webkit-transform 0.5s ease-out; 
 
    transition: background-color 0.5s, -webkit-transform 0.5s ease-out; 
 
    transition: background-color 0.5s, transform 0.5s ease-out; 
 
    transition: background-color 0.5s, transform 0.5s ease-out, -webkit-transform 0.5s ease-out; 
 
} 
 

 
.icon-twitter 
 
{ 
 
    color: #000; 
 
    fill: #000; 
 
} 
 
.icon-twitter:hover { 
 
    background: #00aced; 
 
}

<ul class="soc">  
 
    <li><a href="#" class="icon-twitter" title="Twitter"> 
 
    <svg viewBox="0 0 512 512"> 
 
     <path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/> 
 
    </svg> 
 
    <!--[if lt IE 9]><em>Twitter</em><![endif]--></a></li> 
 
</ul>

Answer 1

將過渡屬性放在元素本身上，而不是懸停狀態。否則，它不會影響元素。

.soc { 
 
    display: block; 
 
    font-size: 0; 
 
    list-style: none; 
 
    margin: 0; 
 
    text-align: center; 
 
} 
 

 
.soc li { 
 
    display: inline-block; 
 
    margin: 12px; 
 
    margin: 1.2rem; 
 
} 
 

 
.soc a, 
 
.soc svg { 
 
    display: block; 
 
} 
 

 
.soc a { 
 
    position: relative; 
 
    height: 50px; 
 
    height: 5.0rem; 
 
    width: 50px; 
 
    width: 5.0rem; 
 
} 
 

 
.soc svg { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.soc em { 
 
    font-size: 14px; 
 
    line-height: 1.5; 
 
    margin-top: -0.75em; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 50%; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 
.icon-twitter { 
 
    color: #000; 
 
    fill: #000; 
 
    border-radius: 100%; 
 
    transition: background-color 0.5s, -webkit-transform 0.5s ease-out; 
 
    transition: background-color 0.5s, transform 0.5s ease-out; 
 
    transition: background-color 0.5s, transform 0.5s ease-out, -webkit-transform 0.5s ease-out; 
 
    -webkit-transition: background-color 0.5s, -webkit-transform 0.5s ease-out; 
 
} 
 

 
.icon-twitter:hover { 
 
    color: #fff; 
 
    fill: #fff; 
 
    -webkit-transform: scale(1.25); 
 
    transform: scale(1.25); 
 
    background: #00aced; 
 
}

<ul class="soc"> 
 
    <li> 
 
    <a href="#" class="icon-twitter" title="Twitter"> 
 
     <svg viewBox="0 0 512 512"> 
 
     <path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/> 
 
    </svg> 
 
     <!--[if lt IE 9]><em>Twitter</em><![endif]--></a> 
 
    </li> 
 
</ul>