How can I smooth out my CSS3 Animation?

Question

I have made a simple CSS3 animation, but it is extremely rough looking. It moves very jagged. Is there a way I can smooth out the animation and make it look a little more natural? I am attempting to make the Microsoft Cortona logo.

The HTML:

<div name="CortanaRing1" id="CortonaRing1" class="CortonaRing1">

</div>

The CSS:

#CortonaRing1 {
    border-radius: 50%;
    animation-duration: 4s;
    border: 30px solid #000;
    animation-name: Cortona;
    animation-iteration-count: infinite;
    background-color: transparent;
    color: #FFF;
    margin: 0 0 0 0;
    float: left;
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    height: 250px;
    min-height: 250px;
    max-height: 250px;
}

@keyframes Cortona {
    0%  {
            border: 30px solid #000;
            margin: 0 0 0 0;
        }

    25% {
            border: 25px solid #000;
            margin: 5px 0 0 5px;
        }

    50% {
           border: 30px solid #000;
           margin: 0 0 0 0;
        }
    100%{
           border: 25px solid #000;
           margin: 5px 0 0 5px;
        }
}

You can see a demo of my code working on this JSFiddle: http://jsfiddle.net/gjvhsje6/

Answer 1

One thing, unless you want it that way in particular, you could eliminate the last step of the animation. That way the first state and the last state will be the same, avoiding the jump that you see when the animation ends:

@keyframes Cortona {
    0%  {
            border: 30px solid #000;
            margin: 0 0 0 0;
        }

    50% {
            border: 25px solid #000;
            margin: 5px 0 0 5px;
        }

    100% {
           border: 30px solid #000;
           margin: 0 0 0 0;
        }
}

Then, as I mentioned in the comments, I would not use the border and margin because you get that "jumpy" effect on FF and IE (not on Chrome). You could use the box-shadow with an inset value. The advantage of using it is that the box doesn't move from its original position (avoiding that "relocation" that you get when changing the border/margin).

Something like this:

@keyframes Cortona {
    0%  {
            box-shadow: inset 0px 0px 1px 30px #000;
        }

    50% {
            box-shadow: inset 0px 0px 1px 25px #000;
        }

    100% {
           box-shadow: inset 0px 0px 1px 30px #000;
        }
}

You can see it working here: http://jsfiddle.net/gjvhsje6/2/

Notice that the CSS would change slightly, as I added padding:30px; to #CortonaRing1 .

---

The previous example makes the ring grow inward; if you want it to grow outward, remove the inset from the rule:

@keyframes Cortona {
    0%  {
            box-shadow:  0px 0px 1px 30px #000;
        }

    50% {
            box-shadow:  0px 0px 1px 25px #000;
        }

    100% {
           box-shadow:  0px 0px 1px 30px #000;
        }
}

See a demo working here: http://jsfiddle.net/gjvhsje6/4/ (in this case instead of playing with the padding , you may want to adjust the margin )