Wobbly CSS Animation with Border-Radius in Internet Explorer

Wobbly CSS Animation with Border-Radius in Internet Explorer

It looks like it is the transparent outline interfering with the edge of the object. The outline is always a square (as you can see by using outline: 1px solid blue; for example). I can only assume that using a 1px transparent outline outline over an interpolated circular shape causes the rendering issue.

Replacing outline:1px solid transparent; with outline:1px solid rgba(255, 255, 255, 0); or outline:0 solid transparent; fixes Edge and IE11 for me. I don't have Firefox so I cannot test if this also removed the jagged edges still.

@keyframes spin{    0% {transform:rotateZ(0deg);}    50% {transform:rotateZ(360deg);border-radius:60%;}    100%{transform:rotateZ(720deg);}}@-webkit-keyframes spin{    0% {transform:rotateZ(0deg);}    50% {transform:rotateZ(360deg);border-radius:60%;}    100%{transform:rotateZ(720deg);}}@-moz-keyframes spin{    0% {transform:rotateZ(0deg);}    50% {transform:rotateZ(360deg);border-radius:60%;}    100%{transform:rotateZ(720deg);}}@-ms-keyframes spin{    0% {transform:rotateZ(0deg);}    50% {transform:rotateZ(360deg);border-radius:60%;}    100%{transform:rotateZ(720deg);}}@-o-keyframes spin{    0% {transform:rotateZ(0deg);}    50% {transform:rotateZ(360deg);border-radius:60%;}    100%{transform:rotateZ(720deg);}}#spinme{    display:inline-block;    margin:0.2rem;    width:0.8rem;    height:0.8rem;    border:0.2rem solid black;    border-radius:0;    outline:0 solid transparent;    transform:rotateZ(0deg);    animation: spin infinite 4s;    -webkit-animation: spin infinite 4s;    -moz-animation: spin infinite 4s;    -ms-animation: spin infinite 4s;    -o-animation: spin infinite 4s;}

<div id="spinme"></div>

Internet Explorer 11 wobbly CSS3 animation

For what it's worth, it also occurs on other browsers. It has to do, how the border is drawn, it's not a perfect round. As far as I know, there isn't a quick fix for this. However you can draw the border as a background image.

.spinner {
display:block;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-image:url(http://www.clipartbest.com/cliparts/9iR/RyK/9iRRyKLie.png);
    background-size:100%;

    -webkit-animation: application-loading-rotate 1s;
    animation: application-loading-rotate 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes application-loading-rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes application-loading-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

See:
http://jsfiddle.net/eQegA/26/

CSS rotation in IE is jittery

So, I ended up using a 256x256 transparent PNG to replicate the effect without using CSS borders, due to IE not being able to render perfect circles with border-radius.

.loading {
  display: inline-block;
  font-size: 20px;
  height: 1em;
  width: 1em;
  margin: 0 auto;
  position: relative;
  -webkit-animation: loading 1s infinite linear;
  -moz-animation: loading 1s infinite linear;
  animation: loading 1s infinite linear;

  /*
  **border-left: 0.25em solid rgba(0, 0, 0, .3);
  **border-right: 0.25em solid rgba(0, 0, 0, .3);
  **border-bottom: 0.25em solid rgba(0, 0, 0, .3);
  **border-top: 0.25em solid rgba(0, 0, 0, .8);
  */
  background-image: url(../images/loading.png);
  background-size: 100% 100%;

  border-radius: 100%;
  vertical-align: middle;
  margin: 0 0.5em;
}

Why does border-radius not work in a specific website with Internet Explorer?

A website can ask IE to use an older engine to render it, check the inspector, it should say if it's using some older version, wacky compatibility modes, stuff like that.

Internet Explorer 11 Not allowing calculation within @keyframe

I got it to work in IE11 (on W7 x64) with your jsfiddle by using the answer given at IE 10 + 11: CSS transitions with calc() do not work:

@keyframes slidein {
    from {
        transform:translateX(0);
    }
    to {
        transform:translateX(-100%) translateX(250px); 
    }
}

Generating an animated rainbow border

I was able to get this working by animating the background-position as an offset, there is a very slight flicker when the animation resets on my browser, but you can make it less frequent by using larger vh values, and it's only really noticeable on thick elements (or when you have stuff like border 3em)

    /*animate the background gradient position, use vh so that start/end syncs up viewport horizontal*/
@keyframes rainbow {
    from {background-position: -100vh 0}
    to {background-position: 100vh 0}
} 

/*compatibility*/
@-moz-keyframes rainbow {
    from {background-position: -100vh 0}
    to {background-position: 100vh 0}
}
@-webkit-keyframes rainbow {
    from {background-position: -100vh 0}
    to {background-position: 100vh 0}
}
@-ms-keyframes rainbow {
    from {background-position: -100vh 0}
    to {background-position: 100vh 0}
}
@-o-keyframes rainbow {
    from {background-position: -100vh 0}
    to {background-position: 100vh 0}
}

 .rainbow {
  border: double 0.3em transparent;
  border-radius: 10px;
     /*added a colourstop here, without the third colourstop you get a hard edge*/
  background: linear-gradient(white, white), 
  repeating-linear-gradient(to right, rgb(82, 82, 209),rgb(235, 50, 235), rgb(82, 82, 209));
  background-origin: border-box;
  background-clip: content-box, border-box;

            animation-name: rainbow;
            animation-duration:  3s;

            /*set animation to continue forever, and to move at a single rate instead of easing*/
            animation-iteration-count: infinite;
            animation-timing-function: linear;
}

Hope this helps!

---

Related Topics