CSS3 animation does not work in IE11, but works in other browsers

Question

I created a CSS3 animation on a button. At the moment, it works great everywhere except IE. I know that this will not work in older versions of IE, but I at least expected it to work in IE11.

I created a fiddle to demonstrate Fiddle

I invoke animation on :before and :after like this

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

If you open the script in Firefox or Chrome, you should see the animation on the button. If you open it in IE11, this is just a static point. I went online and tried a few things, like moving animated frames to the top of the CSS file, but it still doesn't work.

Is there a way to make this animation work in IE11?

Answer 1

There are two things that prevent animations from working in IE11, and they look like this:

• IE11 always has a problem setting animation-play-state as running in shortcut. There is no reason for this, and this should probably be regarded as a mistake. To fix this problem you only need to remove running from the transcript. This will not hurt, since the default value for animation-play-state is running .
• The size of the parent button container is only 10 pixels x 10 pixels, while the pseudo-elements ultimately get a size of 60 pixels x 60 pixels during the animation. While other browsers show overflow by default, IE11 seems to crop it. This needs to be double-checked by the specifications to find out if this is a mistake or something that is poorly defined.
• Fixing an overflow problem is again quite simple. Just add overflow: visible for the button container ( .btnPulse.inactive ). It also will not cause any problems in another browser, because they do it by default anyway.

Snippet showing overflow problem:

In the snippet below, I avoided the animation and added a few box-shadow default aliases so that it all looked like four concentric circles with a red color (created by a button element) in the middle, followed by a white circle (empty space), followed by a blue color (created by the element’s shadow tag :before ), and then a green circle (created by the element’s shadow tag :after ).

In Chrome, Firefox, and Opera, concentric circles will be completely visible , but IE11 will only show a red red circle , because the rest are outside the parent area.

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

---

Working snippet with correction:

The snippet below uses both of the above fixes, and it works in IE11, Chrome, Firefox, and 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>