Transforms, Transitions & Animations — Interview Questions & Answers

Ques: What are CSS Transforms?

Ans: The transform property allows you to rotate, scale, move, or skew elements in 2D or 3D space without affecting the document flow.

Example:

div {
  transform: rotate(45deg);
}

Ques: What are the different types of 2D Transforms?

Ques: What are 3D Transforms in CSS?

Ans: 3D transforms add depth to elements using X, Y, and Z axes.

• rotateX(), rotateY(), rotateZ(), translateZ(), scaleZ()

Example:

div {
  transform: rotateY(60deg) translateZ(50px);
  perspective: 500px;
}

Ques: What is the perspective property?

Ans: perspective gives a sense of depth to 3D-transformed elements — like a camera view.

Example:

.container {
  perspective: 800px;
}

Ques: What are CSS Transitions?

Ans: Transitions allow property changes in CSS to occur smoothly over a period of time, instead of instantly.

Example:

button {
  background-color: blue;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: green;
}

Ques: What are common Transition Timing Functions?

Example:

transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);

Ques: What are CSS Animations?

Ans: CSS animations allow you to define multiple stages of style changes using @keyframes.

Syntax:

animation: name duration timing-function delay iteration-count direction fill-mode;

Example:

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

.ball {
  animation: bounce 1s infinite;
}

Ques: What is the difference between Transitions and Animations?

Ques: What is @keyframes in CSS?

Ans: @keyframes defines the stages of an animation and what happens at each step.

Example:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
div {
  animation: fadeIn 2s ease-in;
}

Ques: What are animation-iteration-count and animation-direction?

Example:

animation: spin 2s linear infinite alternate;

Ques: What is the animation-fill-mode property?

Ans: Defines how an element retains style before/after animation runs.

Example:

animation-fill-mode: forwards;

Ques: How can you chain multiple animations?

Ans: Use comma-separated animation names.

Example:

div {
  animation: fadeIn 2s, slideUp 3s ease-in;
}

Ques: What is will-change and why is it used?

Ans: will-change hints the browser which properties will change soon, so it can optimize performance.

Example:

div:hover {
  will-change: transform, opacity;
}

Ques: How to pause or control animations with CSS?

animation-play-state: paused;

You can pause an animation on hover:

div:hover {
  animation-play-state: paused;
}

Ques: What are common use cases for Transforms & Animations in web design?

• Hover effects on buttons or cards
• Spinning loaders or icons
• Sliding menus & modals
• Parallax scrolling
• Animated backgrounds