關鍵幀動畫在IE11上無法正常工作

Question

這是它在其他瀏覽器中呈現的方式

這是它在IE11上呈現的方式

我使用了以下關鍵幀動畫

 .support_team_bubble{ height: 15px; width: 15px; position: absolute; top: 33%; left: 52.5%; border-radius: 50%; background: red; -webkit-animation: bubbleMoveSupport 3.5s infinite; -moz-animation: bubbleMoveSupport 3.5s infinite; -o-animation: bubbleMoveSupport 3.5s infinite; animation: bubbleMoveSupport 3.5s infinite; -ms-animation: bubbleMoveSupport 3.5s infinite; } @-webkit-keyframes bubbleMoveSupport{ 0% {left: 52.5%;} 50% {left: 60.2%;} 60% {left: 60.2%;} 60% {top: 33%;} 80% {top: 25.9%;} 90% {left: 60.2%;} 90% {top: 25.9%;} 100% {left: 65.5%;} 100% {top: 25.9%;} } @keyframes bubbleMoveSupport{ 0% {left: 52.5%;} 50% {left: 60.2%;} 60% {left: 60.2%;} 60% {top: 33%;} 80% {top: 25.9%;} 90% {left: 60.2%;} 90% {top: 25.9%;} 100% {left: 65.5%;} 100% {top: 25.9%;} } 

 <div class="support_team_bubble"></div> 

注意：上面的代碼用於右上角（第一個聊天氣泡）。

有什么我需要照顧，我想丟失以防Internet Explorer嗎？

Answer 1

這可能是由於百分比關鍵幀點的多個聲明。 嘗試將您的屬性組合為重復的關鍵幀點，如下所示：

 .support_team_bubble { height: 15px; width: 15px; position: absolute; top: 33%; left: 52.5%; border-radius: 50%; background: red; -webkit-animation: bubbleMoveSupport 3.5s infinite; -moz-animation: bubbleMoveSupport 3.5s infinite; -o-animation: bubbleMoveSupport 3.5s infinite; animation: bubbleMoveSupport 3.5s infinite; -ms-animation: bubbleMoveSupport 3.5s infinite; } @-webkit-keyframes bubbleMoveSupport{ 0% {left: 52.5%;} 50% {left: 60.2%;} 60% {left: 60.2%; top: 33%;} 80% {top: 25.9%;} 90% {left: 60.2%; top: 25.9%;} 100% {left: 65.5%; top: 25.9%;} } @keyframes bubbleMoveSupport{ 0% {left: 52.5%;} 50% {left: 60.2%;} 60% {left: 60.2%; top: 33%;} 80% {top: 25.9%;} 90% {left: 60.2%; top: 25.9%;} 100% {left: 65.5%; top: 25.9%;} } 

 <div class="support_team_bubble"></div>