針對同一個div的兩個CSS動畫在Chrome上不起作用，但在Safari上運行正常

Question

我有以下標記和CSS。該按鈕受兩個CSS動畫影響：按鈕呈現時的bounceIn動畫和懸停效果。

我的問題是，這在Safari中正常工作，但在Chrome中不起作用。由於bounceIn動畫，Chrome似乎忽略了:hover僞類中的變換規則。如果我刪除以下類：動畫 - 第二彈跳在上，懸停狀態的作品。有任何想法嗎？

.ico-btn.blue-stroke { 
 
    background-color: transparent; 
 
    border-color: rgb(52, 152, 219); 
 
    border-right-style: solid; 
 
    border-right-width: 10px; 
 
    border-bottom-style: solid; 
 
    border-bottom-width: 10px; 
 
    border-left-color: rgb(52, 152, 219); 
 
    border-left-style: solid; 
 
    border-left-width: 10px; 
 
    border-top-left-radius: 50%; 
 
    border-top-right-radius: 50%; 
 
    border-top-style: solid; 
 
    border-top-width: 10px; 
 
} 
 
.ico-btn.btn-settings-smm-txt { 
 
    font-family: 'webfontregular', Arial, sans-serif; 
 
    font-size: 100px; 
 
    font-weight: 900; 
 
    height: 80px; 
 
    line-height: 15px; 
 
    min-width: 0px; 
 
    padding: 60px 0 0 0; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    width: 140px; 
 
    z-index: 2; 
 
    color: rgb(52, 152, 219); 
 
} 
 
.ico-btn { 
 
    margin-right: 0px; 
 
    cursor: pointer; 
 
    display: block; 
 
    margin: 0 auto; 
 
    -webkit-transition: -webkit-transform .1s ease-out; 
 
    -moz-transition: -moz-transform .1s ease-out; 
 
    -o-transition: -o-transform .1s ease-out; 
 
    transition: transform .1s ease-out; 
 
} 
 
.ico-btn:hover, 
 
.ico-btn:active, 
 
.ico-btn-android { 
 
    -webkit-transform: scale(0.92); 
 
    transform: scale(0.92); 
 
    opacity: 0.80; 
 
    color: #89df88; 
 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
 
} 
 
.animated-second { 
 
    -webkit-animation-duration: 0.75s; 
 
    animation-duration: 0.75s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 
@-webkit-keyframes bounceInUp { 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translateY(2000px); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: translateY(-30px); 
 
    } 
 
    80% { 
 
    -webkit-transform: translateY(10px); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateY(0); 
 
    } 
 
} 
 
@keyframes bounceInUp { 
 
    0% { 
 
    opacity: 0; 
 
    transform: translateY(2000px); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    transform: translateY(-30px); 
 
    } 
 
    80% { 
 
    transform: translateY(10px); 
 
    } 
 
    100% { 
 
    transform: translateY(0); 
 
    } 
 
} 
 
.bounceInUp { 
 
    -webkit-animation-name: bounceInUp; 
 
    animation-name: bounceInUp; 
 
}

<div role="button" class="ico-btn btn-settings-smm-txt blue-stroke campaign-button animated-second bounceInUp"> 
 
    <span>A</span> 
 
</div>

Answer 1

的問題（因爲某些原因不明我），似乎是因爲animation-fill-mode: both設置爲.animated-second選擇。將其設置爲animation-fill-mode: none似乎可以解決問題。

，我能想到的唯一解釋是：animation-fill-mode: both使該元素保持狀態的最後一個關鍵幀一旦動畫完成，因爲最後一個關鍵幀具有transform設置它以某種方式阻止大規模被應用，而當填充模式設置爲none時，一旦動畫完成，元素沒有transform。

設置animation-fill-mode: backwards也得到了縮放變換的工作，因爲這也類似於animation-fill-mode（從它不使元素保持變換的意義上來說），它證明了上述點。

（我試圖找到確切的原因，並會在當我找到它編輯，或如果有更好的一個張貼將刪除我的答案。）

.ico-btn.blue-stroke { 
 
    background-color: transparent; 
 
    border-color: rgb(52, 152, 219); 
 
    border-right-style: solid; 
 
    border-right-width: 10px; 
 
    border-bottom-style: solid; 
 
    border-bottom-width: 10px; 
 
    border-left-color: rgb(52, 152, 219); 
 
    border-left-style: solid; 
 
    border-left-width: 10px; 
 
    border-top-left-radius: 50%; 
 
    border-top-right-radius: 50%; 
 
    border-top-style: solid; 
 
    border-top-width: 10px; 
 
} 
 
.ico-btn.btn-settings-smm-txt { 
 
    font-family: 'webfontregular', Arial, sans-serif; 
 
    font-size: 100px; 
 
    font-weight: 900; 
 
    height: 80px; 
 
    line-height: 15px; 
 
    min-width: 0px; 
 
    padding: 60px 0 0 0; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    width: 140px; 
 
    z-index: 2; 
 
    color: rgb(52, 152, 219); 
 
} 
 
.ico-btn { 
 
    margin-right: 0px; 
 
    cursor: pointer; 
 
    display: block; 
 
    margin: 0 auto; 
 
    -webkit-transition: -webkit-transform .1s ease-out; 
 
    -moz-transition: -moz-transform .1s ease-out; 
 
    -o-transition: -o-transform .1s ease-out; 
 
    transition: transform .1s ease-out; 
 
} 
 
.ico-btn:hover, 
 
.ico-btn:active, 
 
.ico-btn-android { 
 
    -webkit-transform: scale(0.92); 
 
    transform: scale(0.92); 
 
    opacity: 0.80; 
 
    color: #89df88; 
 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
 
} 
 
.animated-second { 
 
    -webkit-animation-duration: 0.75s; 
 
    animation-duration: 0.75s; 
 
    -webkit-animation-fill-mode: none; 
 
    animation-fill-mode: none; 
 
} 
 
@-webkit-keyframes bounceInUp { 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translateY(2000px); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: translateY(-30px); 
 
    } 
 
    80% { 
 
    -webkit-transform: translateY(10px); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateY(0); 
 
    } 
 
} 
 
@keyframes bounceInUp { 
 
    0% { 
 
    opacity: 0; 
 
    transform: translateY(2000px); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    transform: translateY(-30px); 
 
    } 
 
    80% { 
 
    transform: translateY(10px); 
 
    } 
 
    100% { 
 
    transform: translateY(0); 
 
    } 
 
} 
 
.bounceInUp { 
 
    -webkit-animation-name: bounceInUp; 
 
    animation-name: bounceInUp; 
 
}

<div role="button" class="ico-btn btn-settings-smm-txt blue-stroke campaign-button animated-second bounceInUp"> 
 
    <span>A</span> 
 
</div>