CODEWITHSUNDEEP
csscss-animations
Tomek Buszewski
Tomek Buszewski

Reputation: 7935

Properly timing CSS animation

I'm building a simple CSS-only loader and it works well except for one thing. It starts out somewhat slow. It goes good, reaches the end is slowing down for a bit.

My animation code:

@include keyframes(border-animation) {
  0% {
    border: 10px solid transparent;
    border-right: 10px solid black;
  }

  25% {
    border: 10px solid transparent;
    border-bottom: 10px solid;
  }

  50% {
    border: 10px solid transparent;
    border-left: 10px solid;
  }

  75% {
    border: 10px solid transparent;
    border-top: 10px solid;
  }
};

Example can be found here: http://codepen.io/kinetikc/pen/MwvyxL

Notice how it goes good and when it needs to be going again, it stops for just a split secound.

How can I set the timing right?

Upvotes: 1

Views: 53

Answers (1)

Jose Paredes
Jose Paredes

Reputation: 4080

You can try , changing the timing function of the animation.

http://matthewlein.com/ceaser/

see this link about the timing function, normally i use the timing function linear with loaders and you have ease-in you can see how it work in the link

Also you forgot the 100% in the animation,this may influence!

Upvotes: 3

Related Questions