CSS3 Animation Properties

         @keyframes define करने के बाद एनीमेशन को properly work कराने के लिए CSS animation properties का use करना आवश्यक है। Animation properties से @keyframes को किसी selector (या element) के लिए call किया जाता है।

एनीमेशन में multiple properties हो सकते हैं जिनमे से नीचे दिए गये दो properties का use करना जरूरी है:

• animation-name: एनीमेशन का नाम, जिसे @keyframes में define किया गया हो

• animation-duration: एनीमेशन का duration, seconds (जैसे 5s) या milliseconds (जैसे 100ms) में specify करने के लिए

इन दोनों के अलावा एनीमेशन के लिए और भी कई सारे additional properties हैं जिनका उयोग करके advanced और complex animations design किये जा सकते हैं।

• animation-iteration-count

• animation-timing-function

• animation-delay

• animation-direction

• animation-fill-mode

• animation-play-state

CSS3 Animation Properties

           After defining @keyframes, it is necessary to use CSS animation properties to make the animation work properly. @keyframes are called from animation properties for a selector (or element).

Animation can have multiple properties, out of which it is necessary to use the following two properties:

• animation-name: Name of the animation, defined in @keyframes

• animation-duration: To specify the duration of the animation, in seconds (e.g. 5s) or milliseconds (e.g. 100ms).

Apart from these two, there are many additional properties for animation which can be used to design advanced and complex animations.

• animation-iteration-count

• animation-timing-function

• animation-delay

• animation-direction

• animation-fill-mode

• animation-play-state

Example: