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
Transitions, Transforms & Animations 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.
The `transition` property lets you animate changes to CSS properties smoothly when they change. For example, changing background-color or transform values over a set duration.
button { transition: background-color 0.3s ease; }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.
`transition` shorthand includes property, duration, timing-function, and delay. `iteration-count` belongs to animations, not transitions.
div { transition: all 0.5s ease-in-out; }Transform functions include rotate(), scale(), translate(), and skew(). `color()` is not a transform but a color manipulation function in filters or CSS Color Module.
div { transform: rotate(45deg) scale(1.2); }The `perspective` property defines the distance between the viewer and the 3D element, allowing elements to appear with depth. Used alongside transform-style: preserve-3d.
.scene { perspective: 600px; }CSS animations are defined using the `@keyframes` rule, which specifies property changes at different points in time using percentages or keywords (from/to).
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }`animation-iteration-count` defines how many times an animation should repeat. You can use numbers or `infinite` for continuous looping.
.box { animation-iteration-count: infinite; }Transitions are triggered when a property changes (like hover). Animations run continuously using keyframes. Transitions are simpler and event-based; animations are timeline-based.
div:hover { background: red; transition: background 0.3s; }You can define a `transition` on the property you want to animate, such as color or transform. Then when the property changes (like on hover), it transitions smoothly over the defined duration and easing. Example: `.btn { transition: background 0.3s ease; } .btn:hover { background: #007BFF; }`.
.btn { transition: background 0.3s ease; } .btn:hover { background:#007BFF; }Easing functions like `ease-in`, `ease-out`, and `cubic-bezier()` define acceleration and deceleration of animations for natural motion. They make movement look more realistic rather than linear, improving UX and feel of transitions.
.box { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }`transform-origin` defines the point around which transforms like rotation or scaling occur. For example, `transform-origin: left top;` rotates around the top-left instead of the default center point.
.icon { transform-origin: left top; transform: rotate(45deg); }Prefer GPU-accelerated properties like `transform` and `opacity` over layout-triggering ones like `width` or `top`. Avoid animating large box shadows, use `will-change` for hints, and limit the number of simultaneous animations to reduce reflow and repaints.
.card { will-change: transform; }Optimize by using hardware-accelerated properties like `transform` instead of `top` or `left`. Reduce repainting by avoiding box shadows and gradients. Consider `will-change: transform` and minimize animation duration for better mobile performance.
.btn { transition: transform 0.3s; will-change: transform; }`animation-fill-mode: forwards` ensures the element retains the final keyframe’s styles after the animation completes instead of reverting to its initial state.
.fadeIn { animation-fill-mode: forwards; }`@keyframes` define stages of an animation using percentages. Each stage sets different CSS properties. For example, a fade-in uses `from {opacity:0}` and `to {opacity:1}`. The animation plays over the defined duration and can loop or reverse based on configuration.
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} } .box{ animation: fadeIn 2s ease; }