CSS Animations

CSS Animations allow you to smoothly transition between different styles of an element over a specific duration. You can animate properties like color, size, position, and more, making your web page feel dynamic and interactive.

📐 Syntax:

/* Keyframe Syntax */
@keyframes move {
  0% {
    transform: translateX(0);
    background-color: #007BFF;
  }
  50% {
    transform: translateX(100px);
    background-color: #FF6347;
  }
  100% {
    transform: translateX(0);
    background-color: #007BFF;
  }
}

/* Apply animation */
.animated-box {
  animation: move 2s ease-in-out infinite;
}
  

🧪 Live Example:

CSS Animation Example

🔧 Common Properties:

• @keyframes → Defines the keyframes for an animation. Specifies what happens at different stages (percentage-wise) during the animation.
• animation → A shorthand property to apply an animation to an element. It includes parameters for animation name, duration, timing function, iteration count, etc.
• animation-name → The name of the animation (which corresponds to the keyframes). E.g., move.
• animation-duration → Defines how long the animation should take to complete one cycle.
• animation-timing-function → Defines the speed curve of the animation. E.g., ease-in-out for a smooth transition.
• animation-iteration-count → Specifies the number of times the animation should run. Use infinite for endless loops.

📱 Responsive Layout Tip:

When using animations, ensure they don’t overwhelm users, especially on smaller screens. You can adjust the duration or animation effects for mobile devices using media queries for a better user experience.