CSS Transitions and Animations

CSS transitions allow you to change the properties of an element smoothly over a specified duration. With transitions, you can animate properties like color, size, position, and opacity when an element’s state changes (e.g., hover, focus, click).

Basic Syntax:

.selector {
  transition: property duration timing-function delay;
}

• property: The CSS property you want to animate (e.g., width, background-color). Use all to animate all properties.
• duration: The time the transition takes, specified in seconds (s) or milliseconds (ms).
• timing-function: Defines the speed curve of the transition. Common values: ease, linear, ease-in, ease-out, ease-in-out.
• delay: Specifies a delay before the transition starts.

 

Example: Simple Hover Transition

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color: green;
  transform: scale(1.1);
}

In this example, when the button is hovered over, its background color changes from blue to green and scales up slightly over 0.3s with an ease transition.

Multiple Transitions:

You can animate multiple properties by separating them with commas.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 0.5s, height 0.5s, background-color 1s;
}

.box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

CSS animations allow you to create complex sequences of movements and transformations using keyframes. Unlike transitions, animations can be repeated indefinitely and can change properties multiple times during the animation.

Basic Syntax:

.selector {
  animation: name duration timing-function delay iteration-count direction;
}

• name: The name of the animation (defined using @keyframes).
• duration: How long the animation takes to complete one cycle.
• timing-function: The speed curve of the animation (e.g., ease, linear).
• delay: Specifies a delay before the animation starts.
• iteration-count: The number of times the animation should run (e.g., infinite, 1, 3).
• direction: Defines whether the animation should play forwards, backwards, or alternate. Common values: normal, reverse, alternate.

Example: Simple Animation

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

.box {
  width: 50px;
  height: 50px;
  background-color: orange;
  animation: slide 2s ease-in-out infinite;
}

Here, the .box element moves horizontally (left to right and back) over 2s in an infinite loop using the slide animation.

Keyframes define the states of an element during an animation. You use the @keyframes rule to specify the properties’ values at different points during the animation’s duration.

Basic Keyframes Syntax:

@keyframes animation-name {
  /* Define the animation states */
  0% {
    /* Starting state */
  }
  50% {
    /* Midway state */
  }
  100% {
    /* Ending state */
  }
}

Example: Color Change Animation

@keyframes colorChange {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: green;
  }
}

.color-box {
  width: 100px;
  height: 100px;
  animation: colorChange 4s linear infinite;
}

This animation changes the background color of .color-box from red to yellow to green over 4s.

Using from and to:

You can use from and to as shorthand for 0% and 100%.

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

CSS transformations allow you to rotate, scale, skew, or move elements without disrupting the normal document flow. Commonly used with transitions and animations, the transform property can create a wide range of effects.

Common Transform Functions:

• translate(x, y): Moves an element along the X and Y axes.

.move {
  transform: translate(50px, 100px);
}

• scale(x, y): Resizes an element. Values greater than 1 enlarge the element, while values between 0 and 1 shrink it.

.zoom {
  transform: scale(1.5); /* Enlarges the element to 150% of its original size */
}

• rotate(angle): Rotates an element by a specified angle (in degrees).

.rotate {
  transform: rotate(45deg);
}

• skew(x, y): Skews an element along the X and Y axes.

.rotate {
  transform: rotate(45deg);
}

• transform-origin: Sets the point from which the transformation is applied (e.g., center, top left).

.rotate-origin {
  transform: rotate(45deg);
  transform-origin: top left;
}

Combining Transformations:

You can combine multiple transformations by separating them with a space.

.combo {
  transform: translate(50px, 100px) scale(1.2) rotate(30deg);
}

CSS transitions and animations enhance user experience by allowing smooth changes in element properties. Transitions are best suited for simple, state-based changes (e.g., hover effects), while animations provide more complex, multi-step movements through keyframes. Transformations are the building blocks for dynamic effects, enabling elements to move, rotate, scale, and skew. Together, these tools give you powerful control over how elements behave and interact on your website, making it more engaging and visually appealing.