Animations and Transitions

Animations and transitions are powerful CSS features that allow you to create dynamic and engaging user interfaces. They make your website feel more alive and interactive, improving the overall user experience.

What is the Difference?

Both animations and transitions change the visual appearance of HTML elements, but they work slightly differently:

• Transitions: Create smooth changes between two states of an element. This often happens when a user interacts with the element (e.g., hovering with their mouse). You define the starting and ending styles, and CSS handles the gradual change.
• Animations: Offer more control and complexity. They can perform a sequence of changes over time, without user interaction being required. Think of it like a mini-movie for your element. You define keyframes, which are points in the animation where the style changes.

Transitions: A Simple Hover Effect

Let’s look at a simple transition that changes the background color of a button when you hover over it.

<button class="my-button">Hover Me</button>

.my-button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition: background-color 0.3s ease; /* Add the transition property */
}
 
.my-button:hover {
  background-color: #3e8e41; /* Darker Green on hover */
}

Explanation:

• We style the button with a green background initially.
• transition: background-color 0.3s ease; tells the browser to smoothly transition the background-color property over 0.3 seconds. The ease timing function makes the transition look natural.
• The :hover pseudo-class defines the style when the mouse hovers over the button (darker green).

Animations: A Rotating Box

Now, let’s create a simple animation that rotates a box.

<div class="rotating-box"></div>

.rotating-box {
  width: 100px;
  height: 100px;
  background-color: #f44336; /* Red */
  position: relative;
  animation: rotate 2s linear infinite; /* Apply the animation */
}
 
@keyframes rotate {
  0% { transform: rotate(0deg); } /* Starting point */
  100% { transform: rotate(360deg); } /* Ending point */
}

Explanation:

• We create a red square.
• animation: rotate 2s linear infinite; applies the animation to the box.
  • rotate is the name of the animation (defined below).
  • 2s is the duration (2 seconds).
  • linear is the timing function (constant speed).
  • infinite means the animation will loop continuously.
• @keyframes rotate defines the animation steps. transform: rotate() is used to rotate the element.
  • 0% (start) and 100% (end) define the rotation from 0 to 360 degrees.

Key Takeaways

• Transitions are great for simple, user-triggered changes (like hover effects).
• Animations allow for more complex and continuous effects.
• The transition property controls how a style changes over time.
• The @keyframes rule defines the steps of an animation.
• Experiment with different timing functions (like ease-in, ease-out) to control the animation’s speed.