DEV Community

Cover image for Day 19/200 (Full stack)
Munin Borah
Munin Borah

Posted on

Day 19/200 (Full stack)

#webdev #programming #javascript #beginners

Title: Day 19/200 – Mastering CSS Transitions and Transforms (With Easy Examples)

Hey everyone! Today was Day 19 of my 200-day journey to becoming a full stack developer. I focused on learning two powerful CSS properties: transition and transform. They might sound a bit fancy, but they’re actually super useful and easy to understand once you get the hang of them. Let’s break them down step by step!

🟢 What are CSS Transitions?

CSS transitions allow you to smoothly change property values over a specific duration. Instead of an abrupt change, transitions create an animation-like effect. Think of them as a gentle way to move from one state to another.

Basic Syntax: 

transition: property duration timing-function delay;
Enter fullscreen mode Exit fullscreen mode
  • property – the CSS property you want to animate.
  • duration – how long the animation lasts (e.g., 0.3s or 300ms).
  • timing-function – how the animation progresses (e.g., ease, linear, ease-in, etc.).
  • delay – how long to wait before starting the animation.

Simple Example: Hover Button 

<button class="btn">Hover Me</button>
Enter fullscreen mode Exit fullscreen mode 
.btn {
  background-color: skyblue;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: coral;
}
Enter fullscreen mode Exit fullscreen mode

✅ What’s happening?
When you hover over the button, the background color smoothly changes from skyblue to coral over 0.3 seconds.

🟢 CSS Transforms – Moving and Shaping Elements

Transforms let you visually change an element’s appearance: you can move it, rotate it, scale it up or down, or even skew it.

Basic Transform Properties:

  • translateX(px) / translateY(px) – Move the element along the X or Y axis.
  • rotate(deg) – Rotate the element.
  • scale(scalar) – Resize the element (scale up or down).
  • skew(deg) – Tilt the element.

Simple Example: Scaling an Image 

<img class="image" src="https://via.placeholder.com/150" alt="sample image">
Enter fullscreen mode Exit fullscreen mode 
.image {
  transition: transform 0.3s ease;
}

.image:hover {
  transform: scale(1.2);
}
Enter fullscreen mode Exit fullscreen mode

✅ What’s happening?
When you hover over the image, it grows 1.2 times bigger, creating a zoom-in effect.

🟢 Putting Transitions and Transforms Together

The magic really happens when you combine transitions and transforms. Let’s say you want to make a button that rotates slightly and changes color when hovered over.

Example: Animated Button 

<button class="fancy-btn">Hover Over Me!</button>
Enter fullscreen mode Exit fullscreen mode 
.fancy-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.fancy-btn:hover {
  background-color: #45a049;
  transform: rotate(5deg);
}
Enter fullscreen mode Exit fullscreen mode

✅ What’s happening?
When you hover over the button, it:

  • Changes color from green to a darker green.
  • Rotates by 5 degrees, adding a playful effect!

🟢 More Practical Examples!

Let’s look at a few more examples so you can see how flexible these properties are.

1️⃣ Smooth Sidebar Menu 

<div class="sidebar">Sidebar Content</div>
Enter fullscreen mode Exit fullscreen mode 
.sidebar {
  width: 200px;
  background: #333;
  color: #fff;
  transition: transform 0.3s ease;
  transform: translateX(-100%);
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
}

.sidebar.active {
  transform: translateX(0);
}
Enter fullscreen mode Exit fullscreen mode 
// JavaScript to toggle sidebar
document.querySelector('.sidebar').classList.toggle('active');
Enter fullscreen mode Exit fullscreen mode

✅ When the .active class is added to .sidebar, it smoothly slides in from the left!

2️⃣ Rotating Card on Hover 

<div class="card">Card</div>
Enter fullscreen mode Exit fullscreen mode 
.card {
  width: 100px;
  height: 100px;
  background: pink;
  transition: transform 0.5s ease;
}

.card:hover {
  transform: rotate(15deg);
}
Enter fullscreen mode Exit fullscreen mode

✅ The card tilts slightly to create a dynamic effect.

🟢 Key Takeaways

  • Transitions = Smooth changes in CSS property values over time.
  • Transforms = Visually alter an element (move, rotate, scale, skew).
  • Combine both for cool, interactive effects.

These simple concepts can make your web pages feel alive and interactive without needing complex JavaScript. 🎉

🎯 Next Steps: Moving to JavaScript!

After mastering these two CSS properties, I’m excited to dive into JavaScript soon. JavaScript will let me add even more dynamic behavior to my websites—like toggling classes, creating animations, or responding to user interactions.

Stay tuned for tomorrow’s update!

Final Words
CSS transitions and transforms might sound intimidating at first, but with simple examples and practice, they become second nature. Give these examples a try, tweak them, and watch your web pages come to life!

Image description

Image description

Top comments (1)

Collapse
 
primetarget profile image
Ethan Anderson •

I really liked how you showed that combining transitions and transforms can add both movement and color changes for interactive effects—makes even simple elements feel so much more dynamic!