Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
CSS · Question Set
CSS Animations & Transitions interview questions for placements and exams.
Questions
14
Included in this set
Subject
CSS
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for CSS.
Animate only opacity and transform when possible. Use `will-change` hints, avoid heavy shadows or large repaints, and prefer GPU-accelerated properties.
div { will-change: transform, opacity; }Example — Button micro-interaction: On hover, the button scales slightly and changes color with a smooth ease-out, giving responsive feedback without JavaScript.
button:hover { transform: scale(1.05); transition: transform 0.2s ease-out; }`transition-duration` defines how long the transition lasts. Example: `transition-duration: 0.3s;` makes a property change animate over 0.3 seconds.
button { transition-duration: 0.3s; }`animation-fill-mode` defines how an element looks before or after animation. Using `forwards` keeps the last keyframe state, useful for effects like slide-in that should stay visible.
div { animation: fadeIn 1s forwards; }`transition-property` defines which CSS property changes should animate. Restricting it improves performance.
div { transition-property: background-color; transition-duration: 0.5s; }`ease-in-out` accelerates midway then decelerates, creating smooth natural motion. It’s commonly used for hover or modal transitions.
a:hover { transition: all 0.3s ease-in-out; }`animation-iteration-count` controls how many times an animation repeats. Setting it to `infinite` loops it endlessly.
div { animation: pulse 2s infinite; }`transform` applies 2D/3D transformations like `rotate()`, `scale()`, and `translate()`. It’s GPU-optimized and commonly animated.
div:hover { transform: scale(1.1) rotate(5deg); }The shorthand order is: name duration timing-function delay iteration-count direction fill-mode play-state.
div { animation: bounce 2s linear 1s infinite alternate; }`opacity` and `transform` are GPU-accelerated and don’t trigger layout or repaint, making them ideal for smooth animations.
div:hover { opacity: 0.8; transform: scale(1.05); }Transitions occur when a property changes, like hover. Animations run automatically through keyframes. Transitions handle simple state changes; animations handle continuous or complex sequences.
div:hover { transition: background 0.3s; } @keyframes move { 0% { left:0; } 100% { left:100px; } }Use keyframes for multi-step animations like loading spinners or looping effects. Transitions are best for simple hover or focus changes.
@keyframes bounce { 0%,100% { top:0; } 50% { top:-20px; } }Easing defines acceleration over time — `linear` is constant, `ease-in` starts slow, `ease-out` ends slow, `ease-in-out` smooths both ends. It adds realism and polish to motion.
button:hover { transition: all 0.3s ease-in-out; }`@keyframes` defines intermediate steps of an animation between `from` and `to` or percentages.
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }For complete preparation, combine this set with full subject-wise practice for CSS. You can also explore other subjects and sets from the links below.