CSS Transitions and Animations Questions & Answers

1. What are CSS transitions?

CSS transitions create smooth changes between property values when triggered by events like hover or click, ideal for simple animations like fading or sliding.

2. Why use CSS transitions?

Transitions enhance user experience by adding fluid, polished effects to interactive elements, making interfaces feel dynamic and responsive.

3. Give a real-world analogy for CSS transitions.

Transitions are like a dimmer switch for lights, gradually adjusting brightness (CSS properties) instead of flipping on or off instantly, creating a smooth effect.

4. What are transition properties?

Transition properties specify which CSS properties to animate, duration, timing function, and delay.

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

Tip: Use all for multiple properties, but specify properties for better performance.

5. What are timing functions in transitions?

Timing functions control the pace of transitions, defining how animations accelerate or decelerate.

.box {
  width: 100px;
  transition: width 0.5s ease-in-out;
}
.box:hover {
  width: 200px;
}
    

Values: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier.

6. What is the transition shorthand property?

The transition shorthand combines transition-property, transition-duration, transition-timing-function, and transition-delay.

button {
  transition: background-color 0.3s ease 0.1s;
}
    

7. What are CSS animations?

CSS animations use @keyframes to define a sequence of styles that an element cycles through, running automatically or on a loop.

8. What are keyframes?

@keyframes define animation stages, specifying styles at specific points (e.g., 0%, 50%, 100%).

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

9. What are animation properties?

Animation properties control how @keyframes are applied, including name, duration, timing function, delay, iteration count, direction, and fill mode.

.box {
  animation: slide 2s ease-in-out infinite;
}
@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}
    

10. What is the animation shorthand property?

The animation shorthand combines animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode.

.box {
  animation: slide 2s ease-in-out 0.5s infinite alternate forwards;
}
    

11. What is animation-fill-mode?

animation-fill-mode defines the element’s state before or after the animation (e.g., forwards, backwards).

.box {
  animation: slide 2s ease-in-out forwards;
}
    

Keeps the final keyframe’s styles after the animation ends.

12. What are pseudo-classes in CSS?

Pseudo-classes are selectors that target elements based on their state (e.g., :hover, :focus, :active).

13. How do pseudo-classes trigger transitions?

Pseudo-classes trigger transitions by changing properties when an element’s state changes.

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

14. How do pseudo-classes trigger animations?

Pseudo-classes trigger animations by applying a @keyframes rule on state changes.

.box {
  width: 100px;
  height: 100px;
  background: lightcoral;
}
.box:hover {
  animation: pulse 1s ease-in-out;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
    

15. Write an example of a transition with :focus.

:focus triggers a transition when an element (e.g., an input) is focused.

input {
  border: 1px solid gray;
  transition: border-color 0.3s ease;
}
input:focus {
  border-color: blue;
}
    

16. Write an example of an animation with :active.

:active triggers an animation when an element is clicked or tapped.

.button {
  background: navy;
}
.button:active {
  animation: click 0.2s ease-in-out;
}
@keyframes click {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
    

17. How do transitions differ from animations?

Transitions animate between two states (e.g., normal to hover) with simple property changes, while animations use @keyframes for multi-stage, automatic, or looping sequences.

18. Why use cubic-bezier for timing functions?

cubic-bezier allows custom timing curves for precise control over animation pacing, creating unique effects.

.box {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.box:hover {
  transform: translateX(100px);
}
    

19. How do transitions and animations improve UX?

Transitions and animations:

• Provide visual feedback for interactions (e.g., hover, click).
• Make interfaces feel polished and dynamic.
• Guide user attention with subtle effects.
• Enhance accessibility by avoiding jarring changes.

20. How can you optimize CSS transitions and animations?

• Use transform and opacity for smoother animations (GPU-accelerated).
• Specify transition-property instead of all for performance.
• Limit animation duration to avoid delays (e.g., 0.3s–0.5s).
• Avoid overusing animations to prevent overwhelming users.