web-dev-qa-db-fra.com

L'animation CSS3 ne fonctionne pas dans IE11 mais fonctionne dans d'autres navigateurs

J'ai créé une animation CSS3 sur un bouton. Pour le moment, cela fonctionne parfaitement partout sauf IE. Je sais que cela ne fonctionnera pas bien dans les anciennes versions IE, mais je m'attendais au moins à ce que cela fonctionne dans IE11.

J'ai créé un violon pour montrer Violon

J'appelle l'animation sur :before et :after ainsi

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

Si vous ouvrez le violon dans Firefox ou Chrome, vous devriez voir l'animation sur le bouton fonctionner. Si vous l'ouvrez dans IE11, ce n'est qu'un point statique. Je suis allé en ligne et j'ai essayé quelques choses, comme déplacer les images d'animation en haut du fichier CSS, mais cela ne fonctionne toujours pas.

Existe-t-il un moyen de faire fonctionner cette animation dans IE11?

csscss3animationcss-animationsinternet-explorer-11
11
kate_hudson

Il y a deux choses qui empêchent l'animation de fonctionner dans IE11 et elles sont les suivantes:

  • IE11 a toujours un problème lors de la configuration de animation-play-state comme running dans la sténographie. Il n'y a aucune justification à cela et cela devrait probablement être considéré comme un bug. Le correctif de ce problème devrait être de simplement supprimer le running du raccourci. Cela ne causera aucun dommage car la valeur par défaut de animation-play-state est running.
  • La dimension du conteneur du bouton parent n'est que de 10px x 10px alors que les pseudo-éléments obtiennent finalement une dimension de 60px x 60px pendant l'animation. Alors que d'autres navigateurs affichent par défaut le débordement, IE11 semble le recadrer. Cela doit être recoupé avec les spécifications pour savoir s'il s'agit d'un bogue ou de quelque chose qui est défini de manière lâche.
  • Le correctif du problème de débordement est à nouveau assez simple. Ajoutez simplement un overflow: visible pour le conteneur de boutons (.btnPulse.inactive). Cela ne causera également aucun problème dans un autre navigateur, car ils le font de toute façon par défaut.

Extrait montrant le problème de débordement:

Dans l'extrait ci-dessous, j'ai évité les animations et j'ai juste ajouté quelques _ box-shadow aux pseudo-éléments de telle sorte que le tout ressemble à 4 cercles concentriques avec un cercle de couleur rouge (produit par l'élément bouton) au milieu, suivi d'un cercle blanc (espace vide), suivi d'un cercle de couleur bleue ( produit par l'ombre de boîte de :before élément) puis un cercle vert (produit par l'ombre de la boîte de :after élément).

Dans Chrome, Firefox et Opera les cercles concentriques seraient complètement visibles mais IE11 n'affichera que le cercle rouge central parce que le reste est à l'extérieur zone des parents.

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

Extrait de travail avec le correctif:

L'extrait ci-dessous a les deux correctifs mentionnés ci-dessus appliqués et il fonctionne dans IE11, Chrome, Firefox et 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>
20
Harry