Important Notice:

Course Content
Float Property
0/1
Z-Index
0/1
CSS object-fit Property
0/1
CSS Visibility Property
0/1
CSS (Chapter 4) M2-R5.1
About Lesson

CSS Animation

                Animation CSS3 की एक ऐसी Property है जिसका उपयोग Flash या किसी और अन्य Animation Application के उपयोग के बिना Object को Animate करने के लिए किया जाता है animation की दो main property होती है।

  • Keyframes :
  • Animation property :

CSS Keyframes

            इसके द्वारा हम animation के stages को set करते हैं। प्रत्येक @keyframes तीन चीजों से मिलकर बना होता है जो कुछ इस प्रकार हैं:

  1. Animation name: animation का नाम।

  2. Animation stages: हर एक stage को percentage से define किया जाता है।जहाँ 0% का मतलब beginning stage और 100% का मतलब ending state होता है। इन दोनों के बीच multiple stages define किये जा सकते हैं।

  3. 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:

  1. Animation name: Name of the animation.

  2. 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.

  3. 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); 

}

}

 

error: Content is protected !!