animation-iteration-count

            एनीमेशन कितने बार run होगा यह तय किया जाता है animation-iteration-count property से। इसकी default value 1 होती है यदि एनीमेशन को लगातार बिना रुके चलाना हो तो उसके लिए value को infinite रखनी होगी।

Synatx:        animation-iteration-count: 5;

animation-timing-function:

          Animation की speed curve define करने के लिए animation-timing-function property का use किया जाता है।
इस property की values कुछ इस प्रकार हो सकती है:

• ease: इससे एनीमेशन की speed starting और ending में slow होती है जबकि बीच में fast होती है। यह default value है।

• linear: इससे animation speed starting से ending तक same होती है।

• ease-in: एनीमेशन starting में slow होता है

• ease-out: एनीमेशन की speed ending में slow हो जाती है

• ease-in-out: slow start और slow ending के लिए use होता है

• cubic-bezier(n,n,n,n): खुद से कोई custom timing create करने के लिए इसका उपयोग होगा

Syntax:        animation-timing-function: ease-in;

animation-iteration-count

               How many times the animation will run is decided by the animation-iteration-count property. Its default value is 1. If the animation has to be played continuously without stopping, then the value has to be kept infinite. 

Synatx:        animation-iteration-count: 5;

animation-timing-function:

            Animation-timing-function property is used to define the speed curve of animation.

The values of this property can be something like this:

• ease: Due to this, the speed of the animation is slow in the beginning and ending while it is fast in the middle. This is the default value.

• linear: Due to this the animation speed remains the same from starting to ending.

• ease-in: Animation is slow to start

• ease-out: The speed of the animation slows down at the end

• ease-in-out: Used for slow start and slow ending

• cubic-bezier(n,n,n,n): Used for slow start and slow ending

Syntax:                 animation-timing-function: ease-in;