**Course Title:** Modern CSS: Responsive Design and Advanced Techniques **Section Title:** Transitions, Animations, and Transforms **Topic:** Introduction to CSS Transitions and How to Animate Property Changes **Introduction** =============== CSS transitions allow you to smoothly animate property changes from one state to another. In this topic, we will explore the basics of CSS transitions, including how to define transition properties, create smooth transitions, and troubleshoot common issues. **Understanding CSS Transitions** -------------------------------- A CSS transition is a way to animate the change of a CSS property from one value to another. When you change the value of a property, the transition effect will gradually apply the new value over a specified period of time. **Transition Properties** ------------------------- To create a CSS transition, you need to define the following properties: * `transition-property`: specifies the property to be transitioned * `transition-duration`: specifies the duration of the transition * `transition-timing-function`: specifies the timing function of the transition * `transition-delay`: specifies the delay before the transition starts ### Example: Basic Transition ```css div { width: 100px; height: 100px; background-color: #f2f2f2; transition: width 2s; /* transition property: width, duration: 2s */ } div:hover { width: 200px; } ``` In this example, when you hover over the div element, its width will smoothly transition from 100px to 200px over a period of 2 seconds. **Transition Timing Functions** ------------------------------ Transition timing functions determine how the transition progresses over time. There are several built-in timing functions: * `linear`: linear progress * `ease`: slow start, fast middle, slow end * `ease-in`: slow start, fast end * `ease-out`: fast start, slow end * `ease-in-out`: slow start and end, fast middle ### Example: Using Transition Timing Functions ```css div { width: 100px; height: 100px; background-color: #f2f2f2; transition: width 2s ease-out; /* timing function: ease-out */ } div:hover { width: 200px; } ``` **Transition Delay** ------------------- The transition delay specifies the time to wait before starting the transition. ### Example: Using Transition Delay ```css div { width: 100px; height: 100px; background-color: #f2f2f2; transition: width 2s 1s; /* delay: 1s */ } div:hover { width: 200px; } ``` In this example, the transition will start 1 second after you hover over the div element. **Multiple Transitions** ---------------------- You can define multiple transitions by separating them with commas. ### Example: Multiple Transitions ```css div { width: 100px; height: 100px; background-color: #f2f2f2; transition: width 2s, height 2s; /* multiple transitions */ } div:hover { width: 200px; height: 200px; } ``` **Conclusion** ============== CSS transitions allow you to animate property changes in a smooth and natural way. By defining transition properties, using timing functions, and adding delays, you can create sophisticated animations that enhance the user experience. **Practice and Resources** --------------------------- * [MDN Web Docs: Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions) * [CSS-Tricks: Transitions](https://css-tricks.com/almanac/properties/t/transition/) **Leave a comment or ask for help below.** Next topic: [Using CSS Animations: Keyframes, Animation Properties, and Timing Functions.](#)

div {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
  transition: width 2s; /* transition property: width, duration: 2s */
}

div:hover {
  width: 200px;
}

div {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
  transition: width 2s ease-out; /* timing function: ease-out */
}

div:hover {
  width: 200px;
}

div {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
  transition: width 2s 1s; /* delay: 1s */
}

div:hover {
  width: 200px;
}

div {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
  transition: width 2s, height 2s; /* multiple transitions */
}

div:hover {
  width: 200px;
  height: 200px;
}