CSS Animation
Animation CSS3 की एक ऐसी Property है जिसका उपयोग Flash या किसी और अन्य Animation Application के उपयोग के बिना Object को Animate करने के लिए किया जाता है animation की दो main property होती है।
- Keyframes :
- Animation property :
CSS Keyframes
इसके द्वारा हम animation के stages को set करते हैं। प्रत्येक @keyframes तीन चीजों से मिलकर बना होता है जो कुछ इस प्रकार हैं:
-
Animation name: animation का नाम।
-
Animation stages: हर एक stage को percentage से define किया जाता है।जहाँ 0% का मतलब beginning stage और 100% का मतलब ending state होता है। इन दोनों के बीच multiple stages define किये जा सकते हैं।
-
CSS properties: CSS styles, जिसे हर stage के लिए define किया जा सकता है।
CSS Animation
Animation is a property of CSS3 which is used to animate objects without the use of Flash or any other animation application. Animation has two main properties.
- Keyframes :
- Animation property :
CSS Keyframes
Through this we set the stages of animation. Each @keyframes is made up of three things:
-
Animation name: Name of the animation.
-
Animation stages: Each stage is defined by percentage. Where 0% means beginning stage and 100% means ending state. Multiple stages can be defined between these two.
-
CSS properties: CSS styles, which can be defined for each stage.
Example:
@keyframes scaleme { 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(0.5); opacity: 1; } 100%{ transform: scale(1); } } |