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?

Transform	Description	Example
translate(x, y)	Moves element	transform: translate(50px, 100px);
rotate(angle)	Rotates element	transform: rotate(30deg);
scale(x, y)	Scales element	transform: scale(1.5, 1.5);
skew(x, y)	Skews element	transform: skew(20deg, 10deg);
matrix()	Combines multiple transforms	transform: matrix(1, 0.3, 0.3, 1, 0, 0);

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?

Function	Description
ease	Default smooth transition
linear	Constant speed
ease-in	Starts slow, ends fast
ease-out	Starts fast, ends slow
ease-in-out	Slow start and end
cubic-bezier()	Custom curve

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?

Feature	Transition	Animation
Trigger	Requires event (e.g., hover)	Runs automatically
Keyframes	Not used	Uses @keyframes
Control	Simple	Advanced (looping, reversing, etc.)
Syntax	transition: property duration;	animation: name duration;

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?

Property	Description	Example
animation-iteration-count	Number of times to repeat	infinite, 3
animation-direction	Direction of play	normal, reverse, alternate

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.

Value	Description
none	Default (no effect)
forwards	Keeps final state
backwards	Applies initial state
both	Keeps both

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