Animate Elements at Variable Rates:

There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an animation-iteration-count property and setting @keyframes rules.

To illustrate, the animation on the right consists of two stars that each decrease in size and opacity at the 20% mark in the @keyframes rule, which creates the twinkle animation.

 You can change the @keyframes rule for one of the elements so the stars twinkle at different rates.

An example of the code is:

 .star-1 {

    margin-top: 15%;

    margin-left: 60%;

    animation-name: twinkle-1;

    animation-duration: 1s;

  }

  .star-2 {

    margin-top: 25%;

    margin-left: 25%;

    animation-name: twinkle-2;

    animation-duration: 1s;

  }

You can achieve the same goal by manipulating the animation duration of multiple elements.

Change Animation Timing with Keywords:

In CSS animations, the animation-timing-function property controls how quickly an animated element changes over the duration of the animation. 

If the animation is a car moving from point A to point B in a given time (your animation-duration), the animation-timing-function says how the car accelerates and decelerates over the course of the drive.

There are a number of predefined keywords available for popular options. For example, the default value is ease, which starts slow, speeds up in the middle, and then slows down again in the end. 

Other options include ease-out, which is quick in the beginning then slows down, ease-in, which is slow in the beginning, then speeds up at the end, or linear, which applies a constant animation speed throughout.

The syntax for this is:

 #ball1 {

    left:27%;

animation-timing-function: linear;

  }

  #ball2 {

    left:56%;

animation-timing-function: ease-out;

  }