Transitions and Animations in CSS

Transitions and animations control how HTML elements change from one state to another, without needing JS. Transitions require a triggering event and are used for single-step changes from one state to another, on the other hand, animations can run automatically and support multiple steps by keyframes.

Transitions

Transitions are mostly used with hover and focus effects. Transitions allow control over the timing and type of the style changes. The major properties for transitions are transition-property and transition-durations. You can list the names of the specific CSS properties you want to transition, separated by commas.
Here are some common examples:

• width
• height
• background-color
• color
• opacity
• border
• padding
• margin
• font-size
• transform (for animations like moving, rotating, scaling)
• left, top, right, bottom (for positioning)
• box-shadow
• text-shadow

If you transition the transform property, it would be specified in transitions-property

.element {
  transition-property: background-color;
  /* transition-property:transform; */
}

In the above example specified multiple transition types.
The transition durations define the duration of the transition. (Can be defined with milliseconds or seconds).

.box {
  width: 100px;
  height: 100px;
  background-color: #ff5757;
  transition-property: background-color 1s, transform 1s;
}

.box:hover {
  background-color: #5bfff9;
  transform: translate(50px, 100px) rotate(45deg) scale(1.5);
}

Visualizing the Transition: Code in Action

There are optional properties like transition-timing-function and transition-delay.
The transition-timing-function specifies the speed of the transition effect. The default value is ease. The behavior starts slow, accelerates in the middle, and slows down at the end.
There are other values: ease-in: slow start and speeding up towards the end, ease-out: starts fast and slows down towards the end.

The transition-delay defines a delay before the transition starts. This is also specified in seconds or milliseconds.

But wait! You can actually streamline your code by using a handy shorthand property to combine all the transition settings into one. This includes the properties you want to define the transition(transition-property, transition-duration, transition-timing-function, transition-delay).

.element {
  transition: transform 1s ease 0.5s;
}

.element: hover { 
  transform: translate(50px, 100px) rotate(45deg) scale(1.5); 
}

Animations

Animations allow for the creation of complex movements through the added keyframes rule (@keyframes). Think of keyframes like a storyboard for your animation. Each keyframe is a snapshot of how you want your element to look at a specific point in time. You can have as many keyframes as you like, so you can make your animations as simple or as complex as you want.

@keyframes bounce { 
     0% { transform: translateY(0); }  
    50% { transform: translateY(-100px); } 
    100% { transform: translateY(0); }
}

We also can use from instead of 0% and to instead of 100%.

Example: if you want to make a bounce up and down a ball, here is how you can do that.
Creation of an animation named “bounce”:

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}

Apply the Animation to the ball:

.ball {
  width: 100px;
  height: 100px;
  background-color: #8c52ff;
  border-radius: 50%;
  animation: bounce 2s infinite;
}

Bounce animation: See the Code in Action

A shorthand way to combine all the properties in one property:

.ball {
    animation: bounce 2s ease-in-out infinite; 
}

The “bounce” is the animation we just created, 2s animation time, ease-in-out start and end animation smoothly, infinite keeps the ball bouncing forever.
Let’s break it down. We defined the important moments in our animation
· Keyframe 1: the ball starts at its normal position on the ground

· Keyframe 2: The ball is at the highest point of its bounce

· Keyframe 3: The ball is back on the ground, ready to bounce again.

You can streamline your animations by combining equal property changes at multiple keyframes.

@keyframes bounce { 
  0% { 
    transform: translateY(0); 
  }
  25%, 75% {
    background-color: green;
  } 
  50% { 
    transform: translateY(-100px); 
  } 
  100% { 
    transform: translateY(0); 
  }
}

Let's take a look at animation properties.
animantion-name is the name after the @keyframes that we have defined.
animation-duration is the animation time.
animation-timing-function helps to define the pacing of the animation and works similarly to how we control transition: ease-in, ease-out, ease, … .
animation-delay is the waiting time until the animation is executed.
animation-iteration-count controls how many times the animation will repeat: 1,2 or infinite.
animation-fill-mode defines how the animation should apply styles before and after execution: none, forwards, backwards, and both.
Forwards keep the styling values from the last keyframe and backwards apply the styling values from the first keyframe as soon as the animation is applied. To see the backwards it's important to add an animataion-delay property first.
animation-direction specifies if the animation runs normal or reverse: normal, reverse.

Let's talk about the transform property. This property allows to manipulate the appearance of an element in various ways. You can achieve these transformations by using transform functions.
Here are the main categories and specific functions:

2D Transform Functions:

• Translate:
  - translateX(tx): Moves the element horizontally by tx (can be a length or. percentage).
  - translateY(ty): Moves the element vertically by ty.
  - translate(tx, ty): Moves the element by tx horizontally and ty vertically.
• Rotate:
  - rotate(angle): Rotates the element by angle (in degrees).
• Scale:
  - scaleX(sx): Scales the element horizontally by a factor of sx.
  - scaleY(sy): Scales the element vertically by a factor of sy.
  - scale(sx, sy): Scales the element both horizontally and vertically.
• Skew:
  - skewX(angle): Skews the element along the X-axis by angle.
  - skewY(angle): Skews the element along the Y-axis by angle.
  - skew(ax, ay): Skews the element along the X-axis by ax and the Y-axis by ay.
• Matrix:
  - matrix(a, b, c, d, tx, ty): Applies a matrix transformation, combining scaling, rotation, skewing, and translation into a single function. This is the most general form of a 2D transformation.

3D Transform Functions:

• Translate:
  - translateZ(tz): Moves the element along the Z-axis by tz.
  - translate3d(tx, ty, tz): Moves the element in 3D space by tx, ty, and tz.
• Rotate:
  - rotateX(angle): Rotates the element around the X-axis by angle.
  - rotateY(angle): Rotates the element around the Y-axis by angle.
  - rotateZ(angle): Same as rotate(angle), rotates around the Z-axis.
  - rotate3d(x, y, z, angle): Rotates the element around an arbitrary axis defined by (x, y, z) by angle.
• Scale:
  - scaleZ(sz): Scales the element along the Z-axis by a factor of sz.
  - scale3d(sx, sy, sz): Scales the element in 3D space.
• Perspective:
  - perspective(length): Sets the perspective for the element’s children. It defines the distance between the viewer and the Z=0 plane.

Want to dive deeper? Here are a few resources to explore:

• MDN Web Docs on Transitions
• MDN Web Docs on Animations
• CSS-Tricks Guide to Animations

And remember, the best way to learn is by doing! So start experimenting, building, and creating those amazing web experiences!