关键帧动画在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

这可能是由于百分比关键帧点的多个声明。尝试将您的属性组合为重复的关键帧点，如下所示：

＆＃13;

＆＃13;

.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%;}
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;