Infinite animation using calc is not working in IE11

Question

I have created a simple loading grid in my application, and added an animation over it. This animation seems to work in every browser except IE11.

Can somebody help me understand why it doesn't work and how to get it working in IE11?

.loading {
  background-color: #ededed;
  height: 12px;
  width: 500px;
  overflow: hidden;
}

.animation {
  animation: loading 1.2s linear;
  animation-iteration-count: infinite;
  background-color: #e0e0e0;
  height: 100%;
  left: 0;
  position: relative;
  top: auto;
  width: 300px;
}

@keyframes loading {
  from {left: -30rem}
  to {left: calc(100% + 30rem)}
}

<div class="loading">
  <div class="animation"></div>
</div>

JSFiddle if you're interested: https://jsfiddle.net/9shufwsL/

possible duplicate https://stackoverflow.com/questions/34809544/css3-animation-is-not-working-in-ie11-but-works-in-other-browsers — PraveenKumar, Oct 09 '17 at 13:29
@PraveenKumar not as much, because my problem is not answered by anything in the answer to that question — Jesse, Oct 09 '17 at 13:34

score 1 · Accepted Answer · answered Oct 09 '17 at 14:32

1

Apparently calc() does not work in this context.

I changed the value of left in keyframes to use a percent based endpoint and it works in IE11.

.loading {
  background-color: #ededed;
  height: 12px;
  width: 500px;
  overflow: hidden;
}

.animation {
  animation: loading 1.2s linear;
  animation-iteration-count: infinite;
  background-color: #e0e0e0;
  height: 100%;
  left: 0;
  position: relative;
  top: auto;
  width: 300px;
}

@keyframes loading {
  from {left: -30rem}
  to {left: 110%}
}

<div class="loading">
  <div class="animation"></div>
</div>

answered Oct 09 '17 at 14:32

Julio Feferman

2,658
3
15
26

@Rob and so we would think but it does not work in this particular case where `calc()` is within `@keyframes`. A search for IE11 calc bug returns many hits. Go figure... – Julio Feferman Oct 09 '17 at 14:52
1

After briefly reading a comment elsewhere, I question whether using `calc()` in a keyframe even makes sense but I haven't given it any thought. Seems keyframe should be doing the calculating and `calc()` shouldn't be used at all. – Rob Oct 09 '17 at 14:57

score 1 · Answer 2 · answered Oct 09 '17 at 14:41

1

calc() does not work in IE you could change the @keyframes to:

@keyframes loading {
  from {left: -30rem}
  to {left: 30rem}
}

you could use -moz-calc and it would work but honestly not the best thing to do.

your keyframes would look like so:

@keyframes loading {
  from {left: -30rem}
  to {left: -moz-calc(100% + 30rem)}
}

answered Oct 09 '17 at 14:41

Tibix

400
3
12

Thx for the Page-Link Rob, i just tested Jesse's code in IE11 and Edge and both did not work for me. But it did work with the Code of the correct answer and both code snippets of mine answer. – Tibix Oct 10 '17 at 06:06

Infinite animation using calc is not working in IE11

2 Answers2