CODEWITHSUNDEEP
htmlcssanimationcss-animations
kabirbaidhya
kabirbaidhya

Reputation: 3490

Rotation of elements not being smooth and continous in CSS3 animation

I want to make an ajax loading animation using CSS3. All I want to do is to rotate these circles continuously with a constant speed. Here's what I did so far, but the problem is the animation somehow isn't being smooth; animation starts slow, is fast in between and ends slowly.

I read somewhere making animation-timing-function:linear; would do this; I did, but still now working. Still it is kind of easing animation.

Can anybody tell me how can I make this that way.

Markup: 

<div class="ajax">
    <div class="round outer"></div>
    <div class="round inner"></div>
</div>

CSS:

.ajax {position: relative; }
        .round {border: 5px solid #555; position: absolute; height: 40px; width: 40px; border-radius: 50%; }
        .round.inner {margin: 12px; }
        .round.outer {padding: 12px; }
        .round.outer:before {content: ''; position: absolute; height: 7px; width: 5px; background: #fff; top: -5px; left: 29px;}
        .round.inner:after {content: ''; position: absolute; border: 5px solid transparent; border-bottom: 7px solid #555; left: 15px; top: -15px; }
        .round.inner:before {content: ''; position: absolute; width: 5px; height: 7px; background: #fff; bottom: -7px; left: 18px;}

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

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

        @keyframes ajax-rotate-c
        {
            from {transform: rotate(0deg);}
            to {transform: rotate(-360deg);}
        }

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

    .ajax .round {
        -webkit-animation-timing-function:linear;
        animation-timing-function:linear; 
        }
    .ajax .round.inner{
        animation: ajax-rotate 2s infinite;
        -webkit-animation: ajax-rotate 2s infinite; 
    }

    .ajax .round.outer{
        animation: ajax-rotate-c 2s infinite;
        -webkit-animation: ajax-rotate-c 2s infinite; 
    }

Upvotes: 2

Views: 1810

Answers (1)

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

You need to specify easing function as linear 

.ajax .round.inner{
    animation: ajax-rotate 2s infinite linear;
    -webkit-animation: ajax-rotate 2s infinite linear; 
}

.ajax .round.outer{
    animation: ajax-rotate-c 2s infinite linear;
    -webkit-animation: ajax-rotate-c 2s infinite linear; 
}

Here is the fiddle

Upvotes: 4

Related Questions