Transitions and Animations

• Transition property
• Keyframe animations
• Animation properties (duration, timing-function, delay, etc.)

Transitions and Animations in CSS

CSS Transitions and Animations allow you to create dynamic, engaging web experiences by animating changes to CSS properties. Transitions provide a simple way to animate changes from one state to another, while animations offer more complex and customizable movement.

---

1. Transition Property

CSS Transitions are used to animate the change of CSS properties from one state to another. They allow you to control the timing of property changes, making them smooth rather than abrupt.

a. Basic Syntax

The transition property is a shorthand for four properties: transition-property, transition-duration, transition-timing-function, and transition-delay.

Syntax:

element {
  transition: <property> <duration> <timing-function> <delay>;
}

• transition-property: Specifies the CSS property to which the transition effect is applied (e.g., width, opacity). Use all to apply the transition to all changeable properties.
• transition-duration: Defines how long the transition takes to complete. Specified in seconds (s) or milliseconds (ms).
• transition-timing-function: Describes the speed curve of the transition (e.g., ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier).
• transition-delay: Specifies a delay before the transition starts. Defined in seconds or milliseconds.

Example:

.button {
  background-color: blue;
  transition: background-color 0.5s ease-in-out;
}

.button:hover {
  background-color: green;
}

• In this example, when hovering over the .button, the background color transitions smoothly from blue to green over 0.5 seconds using an ease-in-out timing function.

b. Individual Transition Properties

• transition-property: Specifies the CSS property or properties to transition.

• Example: transition-property: width, height;

• transition-duration: Specifies the duration of the transition.

• Example: transition-duration: 2s;

• transition-timing-function: Specifies the speed curve of the transition.

• Example: transition-timing-function: ease;

• transition-delay: Specifies a delay before the transition begins.

• Example: transition-delay: 0.5s;

---

2. Keyframe Animations

Keyframe animations in CSS allow you to create more complex animations by defining intermediate steps in a sequence of changes. This is done using the @keyframes rule.

a. Basic Syntax

The @keyframes rule defines an animation sequence. Within @keyframes, you specify a series of keyframes, each representing a point along the animation timeline where certain properties should have specific values.

Syntax:

@keyframes animation-name {
  from {
    /* initial styles */
  }
  to {
    /* final styles */
  }
}

or

@keyframes animation-name {
  0% {
    /* initial styles */
  }
  50% {
    /* intermediate styles */
  }
  100% {
    /* final styles */
  }
}

Example:

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.box {
  animation: slideIn 1s ease-out;
}

• This example defines an animation named slideIn where a .box element slides in from the left and fades in over 1 second with an ease-out timing function.

b. Keyframe Percentages

• 0% and 100%: Equivalent to from and to, representing the start and end states of the animation.
• Intermediate Percentages: Define additional steps in the animation timeline, allowing for more detailed control.

Example:

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

• This example creates a “bouncing” effect by defining keyframes at different percentages along the animation timeline.

---

3. Animation Properties

To control keyframe animations, CSS provides a set of properties that can be applied to elements.

a. animation-name

Specifies the name of the @keyframes animation to apply to the element.

Example:

.box {
  animation-name: slideIn;
}

b. animation-duration

Defines how long the animation lasts. Specified in seconds (s) or milliseconds (ms).

Example:

.box {
  animation-duration: 2s;
}

c. animation-timing-function

Defines the speed curve of the animation. It works the same as transition-timing-function.

Example:

.box {
  animation-timing-function: ease-in-out;
}

d. animation-delay

Specifies a delay before the animation starts.

Example:

.box {
  animation-delay: 0.5s;
}

e. animation-iteration-count

Defines how many times the animation should run. It can be a specific number or infinite for continuous looping.

Example:

.box {
  animation-iteration-count: infinite;
}

f. animation-direction

Specifies whether the animation should play in reverse on alternate cycles.

• normal (default): The animation plays forward.
• reverse: The animation plays backward.
• alternate: The animation alternates between forward and backward on each cycle.
• alternate-reverse: The animation alternates, starting with a reverse direction.

Example:

.box {
  animation-direction: alternate;
}

g. animation-fill-mode

Defines what styles should be applied to the element when the animation is not playing (before it starts, after it ends).

• none (default): No styles are applied.
• forwards: Retains the styles defined in the last keyframe after the animation ends.
• backwards: Applies the styles defined in the first keyframe before the animation starts.
• both: Applies the styles for both forwards and backwards.

Example:

.box {
  animation-fill-mode: forwards;
}

h. animation-play-state

Controls whether the animation is running or paused.

• running (default): The animation is playing.
• paused: The animation is paused.

Example:

.box {
  animation-play-state: paused;
}

i. animation (Shorthand Property)

The animation shorthand property combines several animation properties into one declaration.

Syntax:

element {
  animation: <name> <duration> <timing-function> <delay> <iteration-count>
    <direction> <fill-mode> <play-state>;
}

Example:

.box {
  animation: slideIn 2s ease-in-out 0.5s infinite alternate forwards;
}

• This shorthand example applies an infinite alternating slideIn animation with a 2-second duration, starting after a 0.5-second delay, and retaining the end styles.

---

Conclusion

CSS Transitions and Animations provide robust tools for adding life and interactivity to your web designs. Transitions are perfect for simple, state-based changes, while keyframe animations offer the flexibility needed for more intricate and multi-step sequences. Understanding these tools allows you to create polished, dynamic user interfaces that respond fluidly to user interactions.