Animations in CSS & JS

Introduction

Animations make websites engaging and interactive. This tutorial covers CSS transitions, keyframes, and JavaScript-based animations with practical examples.

---

Step 1: CSS Transitions

Smoothly animate property changes:

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #45a049;
}

---

Step 2: CSS Keyframe Animations

Create complex animations using keyframes:

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.bounce {
  display: inline-block;
  animation: bounce 2s infinite;
}

---

Step 3: JavaScript Animations – Basic Example

Animate elements dynamically:

const box = document.getElementById('box');
let position = 0;

function moveBox() {
  position += 5;
  box.style.left = position + 'px';
  if(position < 300) {
    requestAnimationFrame(moveBox);
  }
}

moveBox();

<div id="box" style="width:50px; height:50px; background:red; position:absolute;"></div>

---

Step 4: Combining CSS & JS

Trigger CSS animations with JS:

const animateBtn = document.getElementById('animateBtn');
const circle = document.getElementById('circle');

animateBtn.addEventListener('click', () => {
  circle.classList.add('animate-circle');
});

#circle {
  width: 100px;
  height: 100px;
  background: blue;
  border-radius: 50%;
  transition: transform 0.5s ease;
}

.animate-circle {
  transform: translateX(200px) scale(1.5);
}

---

Step 5: Mini Project Example – Loading Spinner

Create a simple animated loader:

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #4CAF50;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div class="loader"></div>

---

Conclusion

You now know how to animate elements using CSS transitions, keyframes, and JavaScript. Combine these techniques to enhance user experience and create interactive web pages.

---

SEO Suggestions:

• Main keywords: CSS animations, JavaScript animations, web animation tutorial, interactive web design
• Meta description: Learn CSS and JavaScript animations with practical examples. Step-by-step guide for creating smooth and engaging web animations.
• Catchy title suggestions: "CSS & JavaScript Animations – Step-by-Step Guide", "Create Interactive Web Animations with CSS & JS"