不IE11

Question

正常工作关键帧动画这是它是如何在其他浏览器

这是怎么回事

我已经使用上的IE11是renderd正在呈现以下关键帧动画

.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>