After the animation is defined (@keyframes), we can control:

• How long the animation lasts
• How delayed the animation will start
• The repeating frequency of the animation
• Direction of the animation

Here’s a simple implementation:

 
button { 
animation-duration: 1s; 
animation-name: pulse; 
} 

In the above example, we add an animation to a button, define the duration as 1 second, and specify the name of the animation that we created earlier: “pulse.”

If we were to adjust the animation duration, the behavior of the button would change as well. For example:

Demo URL: http://ift.tt/2mh1LZ9

2. Animation Timing

We use the animation timing function when we want to determine how the animation will accelerate and slow down during its movement cycle. We have to determine the speed at which it will move. There are options such as initial, inherit, ease, ease-in, ease-out, and linear…

Credit: http://ift.tt/2mhlXKv

Animation Timing Function: Left (ease) and Right (linear)

Adjusting your animation is a straightforward process. Using the Cubic-bezier curve as a guide, you can adjust the timing according to your needs.

Animation Timing Function: cubic-bezier(.18,.18,.83,-1.33)

Information on how to use the Cubic-bezier curve is available on Mozilla’s Developer Website.

3. Animation Delay

Animation delay is used when we want to determine the delay time of the animation. The animation gets triggered, then starts 1 second later. For example, we applied the delay to our “Send Feedback” button:

Animation Delays: Left (1s delay) and Right (2s delay)

4. Animation Play State

Animation play state is used to specify whether the animation should pause or continue.

• running: Animation continues.
• paused: Animation stops.

Demo URL: http://ift.tt/2mh85zQ

5. Animation Iteration Count

Interaction count is used to determine how many times the animation will repeat its cycle.

• infinite: The animation repeats forever.
• ‘x’: The animation repeats x amount of times.
• inherit: The animation repeats the value from the parent.

Demo URL: http://ift.tt/2mhhYgV

6. Animation Direction

Animation Direction is used to determine in what direction the animation moves — such as whether it’s from 0% to 100% of its size, from 100% to 0%, or from 0% to 100%, then reverse from 100% to 0%.

• Normal: The animation advances from the 0% point to the 100% point.
• Reverse: The starting point of the animation is determined as 100% and moves towards the 0% point.
• Alternate: The animation advances from 0% to 100%; then, from 100% back to 0%.
• Alternate-reverse: The animation advances from 100% to 0%; then, advances from 0% to 100%.

Demo URL: http://ift.tt/2mh85zQ

7. Animation Fill Mode

When the animation is finished, the style applied to the elements during movement is not permanent. It is only applied during the animation and then removed, with the help of this value:

• Backward: Once the animation ends, the style at 0% is applied to the element.
• Forward: Once the animation ends, the style at 100% is applied to the element.
• Both: Elementary styles are applied at the beginning and end of the animation.
• Initial: Sets this property to its default value.

Demo URL: http://ift.tt/2m3hb7c