What are CSS transitions?
A way to control the speed of property changes — instead of being instantaneous, changes happen smoothly over a specified duration.
What are the four sub-properties of the transition shorthand?
transition-property, transition-duration, transition-timing-function, and transition-delay.
What does transition-property specify?
Which CSS properties should be animated during the transition, e.g. transition-property: opacity, transform.
What does transition-duration control?
How long the transition takes to complete, e.g. transition-duration: 0.3s.
What does transition-timing-function define?
The acceleration curve of the transition — e.g. ease, linear, ease-in-out, or a custom cubic-bezier().
What does transition-delay do?
Sets a waiting period before the transition starts after the property change is triggered.
Do transitions require a trigger?
Yes — transitions need a state change trigger like :hover, :focus, a class toggle, or a JavaScript property change.
Can you animate the auto value with transitions?
The spec recommends against it. Browser behavior is inconsistent — some ignore it, others try to interpolate. Avoid animating to/from auto.
What is the difference between CSS transitions and CSS animations?
Transitions animate between two states and need a trigger. Animations can have multiple keyframes, run automatically, loop, and don’t require a trigger.
What is the @keyframes at-rule?
It defines the styles at various points during an animation sequence using percentage waypoints (0% to 100%), or the from/to keywords.
How do you connect @keyframes to an element?
Use the animation-name property with the name of the @keyframes rule, e.g. animation-name: slide-in.
What does animation-iteration-count control?
How many times the animation repeats. Set to infinite for continuous looping.
What does animation-direction do?
Controls whether the animation plays forward, backward, or alternates direction each cycle. Values: normal, reverse, alternate, alternate-reverse.
What does animation-fill-mode do?
Defines styles applied before/after the animation runs. forwards retains the final keyframe styles; backwards applies the first keyframe during the delay; both applies both.
What is animation-play-state?
Controls whether the animation is running or paused. Useful for toggling animations with JavaScript.
Can you combine multiple animations on one element?
Yes — use comma-separated values in the animation property, e.g. animation: resize 1.5s, recolor 1.5s.
Are !important declarations respected inside @keyframes?
No — declarations marked with !important inside keyframe blocks are ignored.
If multiple @keyframes rules share the same name, which is used?
The last one encountered by the parser wins. @keyframes rules don’t cascade between rule sets.
What is the @starting-style at-rule?
It defines the initial styles for elements entering the DOM so they can transition from a starting state, solving the problem of no ‘from’ value for new elements.
What properties cannot be animated?
Properties whose animation type is listed as ‘not animatable’ in the spec, like display (though modern browsers now support transitioning display discretely with some caveats).
