CSS3 Animation Class 34

🎨 CSS3 Animation – Complete Definition and Properties

CSS3 Animation is a powerful feature in web development that allows HTML elements to gradually transition from one style to another without using JavaScript. With CSS3 Animation, developers can create smooth, engaging, and interactive experiences on websites.

🔧 Properties of CSS3 Animation with Definitions:

1. animation-name
   This defines the name of the CSS3 Animation, which links the element to the corresponding @keyframes rules.
2. animation-duration
   Specifies how long the CSS3 Animation should take to complete one cycle (e.g., 2s or 1000ms).
3. animation-delay
   Sets the delay time before the CSS3 Animation begins after the element is loaded or triggered.
4. animation-iteration-count
   Determines how many times the CSS3 Animation should repeat. It can be a number or infinite.
5. animation-direction
   Controls the direction of the CSS3 Animation – it can run normally, in reverse, alternate between the two, etc.
6. animation-timing-function
   Defines the pace of the CSS3 Animation (e.g., ease, linear, ease-in, ease-out).
7. animation-fill-mode
   Specifies how the styles should be applied to the element before and after the CSS3 Animation is executed.
   @keyframes
   A rule that defines the stages of a CSS3 Animation, describing how the element’s style should change at each key point.
   
   🧪 Example:
   @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } div { animation-name: fadeIn; animation-duration: 2s; animation-iteration-count: infinite; }
   
   CSS3 Animation helps reduce the need for JavaScript-based animations and increases performance. Using CSS3 Animation, you can control timing, direction, and number of repetitions easily. Mastering CSS3 Animation makes your web interfaces visually appealing and modern.