CSS3 animation is not working in IE11 but works in other browsers
There are two things that are preventing the animation from working in IE11 and they are as follows:
- IE11 always has a problem when setting
animation-play-state
asrunning
in the shorthand. There is no justification for this and it should probably be considered as a bug. Fix for this issue should be to just remove therunning
from the shorthand. This will cause no harm because the default value foranimation-play-state
isrunning
. - The parent button container's dimension is only 10px x 10px whereas the pseudo-elements are eventually getting a dimension of 60px x 60px during the animation. While other browsers are by defaulting showing the overflow, IE11 seems to be cropping it. This needs to be cross-checked with the specs to find out if it is a bug or something that is loosely defined.
- The fix for the overflow issue is again pretty simple. Just add a
overflow: visible
for the button container (.btnPulse.inactive
). This will also not cause any problem in other browser because they are anyway doing this by default.
Snippet showing the overflow problem:
In the below snippet, I have avoided the animations and just added a couple of default box-shadow
to the pseudo-elements such that the whole thing looks like 4 concentric circles with a red colored circle (produced by the button element) in the middle, followed by a white circle (blank space), followed by a blue colored circle (produced by box shadow of :before
element) and then a green circle (produced by box shadow of :after
element).
In Chrome, Firefox and Opera the concentric circles would be visible completely but IE11 will show only the center red circle because the rest is outside parent's 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>
CSS3 animation not working in IE11 and Microsoft Edge
Finally, I solved the problem. The problem is with calc()
. It does not work inside keyframes in IE and Edge. This can be solved by chaining multiple translateX()
to construct the expression inside calc()
.
For example:
left: calc(100vw - 20px)
is same as
left: translateX(100vw) translateX(-20px)
Updated jsfiddle
Strange CSS3 animation issue in IE11 and Edge
Edge seems to be buggy with position: fixed
. Supposedly the switch between top: 0
and top: auto
(and same story with the bottom
property) causes this behaviour.
If you must maintain the fixed
position, you can try to animate with the transform
property. Change your rulesets as follow:
@keyframes overlayEffectUp {
0% {
transform: translateY(100%); // totally offscreen
}
35%,
65% {
transform: translateY(0%); // totally on screen from bottom
}
100% {
transform: translateY(-100%); // totally off screen again to top
}
}
.block {
position: fixed;
top:0;
bottom:0;
transform: translateY(100%);
width: 100%;
background-color: #0B0B0B;
z-index: 99999;
animation-fill-mode: both;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
Hope this helps.
Cheers, Jeroen
Why is this animation not working in IE11?
I found it out, I looked up every CSS3 function on icanuse.com again, and it turns out, calc() doesn't work inside transform in IE10, IE11, and Edge < 14.
I can live with the workaround of setting the screen dimensions manually (it's for digital signage and the screen will always be shown on full HD)
Simple CSS3 animation not running in IE 11
I found this on a similar question (Source):
Only Microsoft Edge will support SVG CSS Transitions and Animation.. especially stroke-dasharray.
Please see the Microsoft Developer Docs:
https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements
Tested in Edge, it only works when setting the units:
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0px; /* px required */
}
CSS3 animation issue in IE11
It's a weird one this but here's a fix:
Change your html to this:
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".spinnerTinyBar").show();
$("#toggle").click(function(){
$(".divClass").toggleClass('spinnerTinyBar');
});
});
</script>
<input type="button" id="toggle" value="Toggle"/>
<div class="divClass spinnerTinyBar"></div>
</body>
Instead of hiding the element we simply change the class on it to show the animation, or not
Here's an updated fiddle working in ie11
CSS border animation working in Chrome, Firefox, but not Edge 15/IE 11
It works in IE11 if you define the starting property in the original definition
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s infinite;
/* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
border: 9px solid green;
/* this */
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
0% {
left: 0px;
border: 9px solid green;
}
100% {
left: 200px;
border: 10px solid blue;
}
}
@keyframes mymove {
0% {
left: 0px;
border: 9px solid green;
}
100% {
left: 200px;
border: 10px solid blue;
}
}
<div></div>
Related Topics
Twitter Bootstrap - Same Heights on Fluid Columns
Bootstrap Navbar Collapse Media-Query on Custom Width
CSS - Circle with Margin on Border
How to Make Nginx Serve Static Content Like .Js, .Css, .Html
Changing the Scrollbars' Style
How to Vertically Center Align a Position:Relative Element
When Specifying a 0 Value in CSS, Should I Explicitly Mark the Units or Omit
What's the :Any-Link Pseudo-Class For
What Happens If Multiple Classes of the Same Element Define a :Before Pseudo-Element
Should I Use More Than One CSS Sheet
Font Smoothing Techniques? Text-Shadow Rendering Differently in Chrome 14.0.833.0 or Higher
Position Element Over Background Image. But the Bg Img Changes Size with the Window. CSS
Css3 Animation Is Not Working in Ie11 But Works in Other Browsers
Chrome's Hidden CSS Scroll-Snap Threshold and How to Change It
Tailwind CSS Classes Not Showing in Storybook Build
Which Browsers Support Page Break Manipulation Using CSS and the Page-Break-Inside Element