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

CSS Handbook

CSS Transforms, Transitions & Animations — Interview Q&A

Transforms, Transitions & Animations — Interview Questions & Answers