web-dev-qa-db-ja.com

CSS3アニメーションはIE11では機能しませんが、他のブラウザーでは機能します

ボタンにCSS3アニメーションを作成しました。現時点では、IEを除くすべての場所で完全に機能します。私はそれが古いIEバージョンではうまく動作しないことを知っていますが、IE11で動作することを少なくとも期待していました。

Fiddle を示すためにフィドルを作成しました

:beforeおよび:afterでアニメーションを呼び出します

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

FirefoxまたはChromeでフィドルを開くと、ボタンのアニメーションが機能するはずです。 IE11で開くと、単なる静的なドットになります。私はオンラインに行って、アニメーションフレームをCSSファイルの先頭に移動するなど、いくつかのことを試しましたが、それでも動作しません。

このアニメーションをIE11で動作させる方法はありますか？

csscss3animationcss-animationsinternet-explorer-11
11
kate_hudson

IE11でのアニメーションの動作を妨げる2つの要素があり、それらは次のとおりです。

  • IE11では、animation-play-stateを短縮形でrunningとして設定すると、常に問題が発生します。これには正当な理由はなく、おそらくバグと見なされるべきです。この問題を修正するには、ショートハンドからrunningを削除するだけです。 animation-play-stateのデフォルト値はrunningであるため、これにより問題は発生しません。
  • 親ボタンコンテナの寸法は10px x 10pxのみですが、擬似要素は最終的にアニメーション中に60px x 60pxの寸法を取得します。他のブラウザではデフォルトでオーバーフローが表示されますが、IE11ではオーバーフローが発生しているようです。これは仕様とクロスチェックする必要があり、それがバグなのか、それともおおまかに定義されているものなのかを調べる必要があります。
  • オーバーフローの問題の修正も非常に簡単です。ボタンコンテナにoverflow: visibleを追加するだけです（.btnPulse.inactive）。彼らはデフォルトでこれをしているので、これはまた他のブラウザで問題を引き起こしません。

オーバーフローの問題を示すスニペット：

以下のスニペットでは、アニメーションを回避し、いくつかのデフォルトbox-shadowを疑似要素に追加して、全体が4つの同心円のように見える（ボタン要素によって生成される）赤い色の円真ん中、白い円（空白）、青い円（:before要素のボックスシャドウによって生成）、緑の円（: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>
20
Harry