CSS Module 5: Animations and Transitions

Lesson 1: CSS Transitions

Introduction to CSS Transitions

CSS transitions allow you to change property values smoothly (over a given duration) from one state to another. They provide a way to control animation speed and easing functions.

Show Example
Example of CSS Transition
/* CSS */
.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  transition: width 0.3s ease-in-out;
}

.box:hover {
  width: 150px;
}
Transition Properties

Understanding transition properties like `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay` for creating smooth and controlled animations.

Show Example
Example of Transition Properties
/* CSS */
.box {
  transition-property: width, height;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}

Lesson 2: CSS Animations

Creating CSS Animations

CSS animations allow for more complex animations and effects by specifying keyframes that define the style of the element at various points of the animation.

Show Example
Example of CSS Animation
/* CSS */
@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.element {
  animation: slide-in 1s forwards;
}
Animation Properties

Using animation properties like `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, and `animation-iteration-count` to control CSS animations.

Show Example
Example of Animation Properties
/* CSS */
.element {
  animation-name: bounce;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
}

Lesson 3: Advanced Animation Techniques

Control and Manipulate Animations with JavaScript

Using JavaScript to dynamically control CSS animations, such as triggering animations based on user interactions or adjusting animation properties.

Show Example
Example of JavaScript Animation Control
/* JavaScript */
const element = document.querySelector('.box');

element.addEventListener('click', function() {
  element.style.animation = 'spin 1s ease-in-out';
});
Combining Transitions and Animations

Integrating CSS transitions with CSS animations to create complex animation effects that smoothly transition between different states.

Show Example
Example of Transition and Animation Combination
/* CSS */
.element {
  transition: transform 0.3s ease-in-out;
}

.element:hover {
  transform: scale(1.2);
  animation: bounce 0.5s;
}