CSS Transitions and Animations

1. Introduction to CSS Transitions

CSS Transitions allow you to smoothly change property values over a specified duration. They are ideal for creating simple animations, such as hover effects or state changes.

Key properties for transitions:

• transition-property: Specifies the CSS property to transition.
• transition-duration: Defines the duration of the transition.
• transition-timing-function: Controls the speed curve of the transition.
• transition-delay: Adds a delay before the transition starts.

2. Using CSS Transitions

To create a transition, specify the property you want to animate and the duration of the transition.

.box {
  width: 100px;
  height: 100px;
  background-color: #2260e6;
  transition: width 2s; /* Transition the width property over 2 seconds */
}

.box:hover {
  width: 200px; /* New width on hover */
}

You can also transition multiple properties at once:

.box {
  transition: width 2s, height 2s, background-color 2s; /* Transition multiple properties */
}

3. Transition Timing Functions

The transition-timing-function property controls the speed curve of the transition. Common values include:

• ease: Slow start, fast middle, slow end (default).
• linear: Constant speed.
• ease-in: Slow start.
• ease-out: Slow end.
• ease-in-out: Slow start and end.
• cubic-bezier(): Custom speed curve.

.box {
  transition-timing-function: ease-in-out; /* Slow start and end */
}

4. Introduction to CSS Animations

CSS Animations allow you to create more complex and dynamic animations using @keyframes. Unlike transitions, animations can loop, alternate, and have multiple steps.

Key properties for animations:

• animation-name: Specifies the name of the @keyframes rule.
• animation-duration: Defines the duration of the animation.
• animation-timing-function: Controls the speed curve of the animation.
• animation-delay: Adds a delay before the animation starts.
• animation-iteration-count: Defines how many times the animation should repeat.
• animation-direction: Controls the direction of the animation.
• animation-fill-mode: Specifies how styles are applied before and after the animation.

5. Using @keyframes

The @keyframes rule defines the steps of an animation. You can specify styles at different points in the animation timeline.

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

.box {
  animation: slide 3s infinite; /* Apply the slide animation */
}

6. Animation Properties

You can control the behavior of animations using properties like animation-iteration-count, animation-direction, and animation-fill-mode.

.box {
  animation-name: slide;
  animation-duration: 3s;
  animation-iteration-count: infinite; /* Repeat infinitely */
  animation-direction: alternate; /* Alternate direction */
  animation-fill-mode: forwards; /* Retain the final state */
}

7. Combining Transitions and Animations

You can combine transitions and animations to create more dynamic effects. For example, use a transition for hover effects and an animation for continuous motion.

.box {
  width: 100px;
  height: 100px;
  background-color: #2260e6;
  transition: background-color 0.5s ease; /* Transition for hover */
  animation: slide 3s infinite; /* Animation for continuous motion */
}

.box:hover {
  background-color: #ff0000; /* Change color on hover */
}