Day 17&18/200 (Full stack)

Posted on by — No Comments ↓

Day 17 & 18/200 (Full Stack)

🌟 Day 17 & 18 of 200 Days of Code: Mastering CSS Animations

Not every day has to be a marathon of learning new concepts. Some days are about diving deep into a single topic and getting hands-on experience. On Day 17 & 18, I focused on CSS animations, a key part of front-end web development.

By the end of these two days, I gained a solid understanding of how to add smooth, engaging animations to websites using just CSS — no JavaScript required!

☁️ Understanding CSS Animations

CSS animations allow you to add movement and effects to web elements. They’re an excellent way to create engaging user experiences, whether it’s for buttons, images, or entire page transitions.

📌 Syntax: 

@keyframes animation-name {
  from {
    property: value;
  }
  to {
    property: value;
  }
}

.element {
  animation: animation-name duration timing-function;
}

🎨 Key Concepts in CSS Animations

1. Keyframes: The Core of Animations

The @keyframes rule is what powers CSS animations. It defines how an element will change over time. The from and to values represent the start and end points of the animation.

✅ Example: 

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slideIn 2s ease-in-out;
}

This makes an element slide from the left to its original position over 2 seconds.

2. Animation Timing and Duration

The animation-duration property defines how long the animation will take, and the animation-timing-function controls the speed curve.

✅ Example: 

.element {
  animation: slideIn 2s ease-in-out;
}
  • ease-in-out: starts slow, speeds up in the middle, and slows down at the end.
  • Other timing functions: linear, ease-in, ease-out.

3. Repeating and Delaying Animations

You can make animations repeat infinitely or delay them before they start.

✅ Example: 

.element {
  animation: slideIn 2s ease-in-out infinite;
}

This will repeat the animation indefinitely.

🔍 Advanced Techniques in CSS Animations

1. Combining Animations

You can stack multiple animations on the same element to create more complex effects. This involves using multiple keyframes for each effect.

✅ Example: 

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.element {
  animation: fadeInSlide 2s ease-in-out;
}

This combines a fade-in effect with a slide-in effect.

2. Hover Effects

CSS animations can be triggered on hover, which is great for interactive elements like buttons.

✅ Example: 

button {
  background-color: #3498db;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

button:hover {
  transform: scale(1.1);
  background-color: #2980b9;
}

This effect increases the button’s size and changes its color when the user hovers over it.

3. Using Transforms for Smooth Animations

The transform property helps with animations like moving, rotating, or scaling elements.

✅ Example: 

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

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: rotate 2s linear infinite;
}

This creates a loading spinner that rotates indefinitely.

🎯 Why CSS Animations Matter

CSS animations aren’t just visually appealing; they also improve user experience. Here’s why:

  • Engagement: Animations make a website feel more interactive and polished.
  • Guidance: They can highlight important elements and help guide the user’s attention.
  • Feedback: Animations are great for providing instant feedback on user actions, like hovering over buttons or submitting forms.

🧘‍♂️ A Small Win is Still a Win

Some days are for major breakthroughs, and other days are about refining what you already know. I didn’t build anything huge on these two days, but I got hands-on experience with CSS animations and applied what I learned to real-world examples.

I’ve definitely gained a deeper understanding of how to use animations in web development, and it’s a skill I’m eager to keep building on.

💡 Quick Recap

✅ Key Concepts I Learned:

  • How to create animations using @keyframes.
  • Controlling timing with animation-duration and animation-timing-function.
  • Applying animations to hover states and interactive elements.
  • Combining animations for more complex effects.
  • Using transformations to move, rotate, and scale elements.

📚 Resources to Dive Deeper

  • MDN Web Docs: CSS Animations
  • CSS Tricks: A Complete Guide to CSS Animation

👀 What’s Next?

I’m excited to keep exploring more advanced animation techniques and applying them to my projects. Next, I might experiment with CSS transitions or dive deeper into responsive design.

What’s your favorite CSS animation effect? Let me know in the comments! I’d love to hear about your experiences.

Until tomorrow, happy coding! 💻

#CSS #WebDevelopment #FrontendDev #100DaysOfCode #CodingJourney #LearnToCode

Leave a Reply