CSS3 анимация не работает в IE11, но работает в других браузерах

Question

CSS3 анимация не работает в IE11, но работает в других браузерах

Я создал анимацию CSS3 на кнопке. На данный момент, он отлично работает везде, кроме ИЕ. Я знаю, что он не будет хорошо работать в старых версиях IE, но я по крайней мере ожидал, что он будет работать в IE11.

Я создал скрипку, чтобы продемонстрировать Скрипка

Я вызываю анимацию на :before и :after вот так

animation: 1000ms ease 0s normal none infinite running pulse-long;

Если вы открываете скрипку в Firefox или Chrome, вы должны увидеть анимацию на кнопке работает. Если вы открыть его в IE11, это просто статическая точка. Я вышел в интернет и попробовал несколько вещей, таких как перемещение кадров анимации в верхнюю часть CSS-файла, но он все еще не работает.

есть ли способ заставить эту анимацию работать в IE11?

9

animation css css-animations css3 internet-explorer-11

автор: Harry

1 ответов

автор: Harry · Accepted Answer · 2016-01-15 12:36:57

есть две вещи, которые мешают анимации работать в IE11 и они таковы:

IE11 всегда имеет проблему при настройке animation-play-state as running в стенографии. Для этого нет оправдания, и его, вероятно, следует рассматривать как ошибку. Исправить эту проблему следует просто удалить running от стенографии. Это не повредит, потому что значение по умолчанию для animation-play-state is running.
исправление проблемы переполнения снова довольно просто. Просто добавьте overflow: visible для контейнера (кнопка.btnPulse.inactive). Это также не причина любой проблемы в другом браузере, потому что они все равно делают это по умолчанию.

фрагмент, показывающий проблему переполнения:

в приведенном ниже фрагменте я избежал анимации и просто добавил пару по умолчанию box-shadow к псевдо-элементам таким, что все это выглядит как 4 концентрических круга с красным цветным кругом (произведенным элементом кнопки) в середине, за которым следует белый круг( пустое пространство), а затем синий цветной круг (производится box shadow of :before элемент), а затем зеленый круг (производится box shadow of :after элемент).

на Chrome, Firefox и Opera концентрические круги будут видны полностью но IE11 покажет только центр красного круга потому что остальное находится за пределами родительской области.

.btnPulse.inactive.throb::before {
  box-shadow: 0 0 0 16px blue inset;
  display: block;
  height: 60px;
  left: -22px;
  margin: 0 auto;
  right: 0;
  top: 50%;
  transform: translate3d(-3px, -50%, 0px);
  width: 60px;
}
.btnPulse.inactive::before {
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 1px red inset;
  content: "";
  display: block;
  height: 30px;
  left: -10px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: -5px;
  transition: all 300ms ease-in-out 0s;
  width: 30px;
}
.btnPulse.inactive.throb::after {
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 8px green inset;
  content: "";
  display: block;
  height: 60px;
  left: -22px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translate3d(-2px, -50%, 0px);
  transition: all 300ms ease-in-out 0s;
  width: 60px;
}
.btnPulse.inactive {
  background: red none repeat scroll 0 0;
  border: medium none;
  border-radius: 100%;
  height: 10px;
  outline: medium none;
  padding: 0;
  position: relative;
  width: 10px;
}
.btnPulse {
  border-radius: 50%;
  cursor: pointer;
  height: 15px;
  padding: 0;
  transition: all 300ms ease-in-out 0s;
  width: 15px;
}
.btn {
  -moz-user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 6px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
#button-container {
  position: absolute;
  left: 100px;
  top: 100px;
}

<div id="button-container">
  <button class="btn btnPulse inactive throb"></button>
</div>

рабочий фрагмент с исправить:

приведенный ниже фрагмент имеет оба вышеупомянутых исправления, и он работает в IE11, Chrome, Firefox и Opera.

@keyframes pulse-short {
  100% {
    box-shadow: inset 0 0 0 80px red;
    -moz-box-shadow: inset 0 0 0 80px red;
    -webkit-box-shadow: inset 0 0 0 80px red;
    height: 60px;
    width: 60px;
    left: -22px;
    opacity: 0;
  }
}
@keyframes pulse-long {
  100% {
    box-shadow: inset 0 0 0 10px red;
    -moz-box-shadow: inset 0 0 0 10px red;
    -webkit-box-shadow: inset 0 0 0 10px red;
    height: 60px;
    width: 60px;
    left: -22px;
    opacity: 0;
  }
}
.btnPulse.inactive.throb::before {
  animation: 1000ms ease 0s normal none infinite pulse-long;
  box-shadow: 0 0 0 0 red inset;
  display: block;
  height: 100%;
  left: 3px;
  margin: 0 auto;
  right: 0;
  top: 50%;
  transform: translate3d(-3px, -50%, 0px);
  width: 100%;
}
.btnPulse.inactive::before {
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 1px red inset;
  content: "";
  display: block;
  height: 30px;
  left: -10px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: -5px;
  transition: all 300ms ease-in-out 0s;
  width: 30px;
}
.btnPulse.inactive.throb::after {
  animation: 2500ms ease 300ms normal none infinite pulse-short;
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 0 red inset;
  content: "";
  display: block;
  height: 30px;
  left: -9px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translate3d(-2px, -50%, 0px);
  transition: all 300ms ease-in-out 0s;
  width: 30px;
}
.btnPulse.inactive {
  background: red none repeat scroll 0 0;
  border: medium none;
  border-radius: 100%;
  height: 10px;
  outline: medium none;
  padding: 0;
  position: relative;
  width: 10px;
  overflow: visible;
}
.btnPulse {
  border-radius: 50%;
  cursor: pointer;
  height: 15px;
  padding: 0;
  transition: all 300ms ease-in-out 0s;
  width: 15px;
}
.btn {
  -moz-user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 6px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
#button-container {
  position: absolute;
  left: 100px;
  top: 100px;
}

<div id="button-container">
  <button class="btn btnPulse inactive throb"></button>
</div>