CSS Animations & Transitions Flashcards
6 cards from real CSS practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.
Read the first 6 CSS Animations & Transitions flashcards as text
Which CSS property specifies the delay before a transition begins?
Answer: transition-delay
The `transition-delay` property defines how long to wait before the transition effect starts after a state change.
What does the CSS `will-change` property do in the context of animations?
Answer: Hints to the browser which properties will be animated so it can optimize rendering
The `will-change` property tells the browser which properties are expected to change, allowing it to prepare optimizations like compositing layers.
Which timing function value produces a linear speed throughout a transition?
Answer: linear
The `linear` timing function maintains a constant speed from start to finish with no acceleration or deceleration.
Which property sets the number of times a CSS animation should play?
Answer: animation-iteration-count
The `animation-iteration-count` property specifies how many times the animation cycle should repeat before stopping.
What CSS function lets you define a custom cubic Bézier timing curve?
Answer: cubic-bezier()
The `cubic-bezier()` function accepts four numeric values defining two control points to create a custom speed curve.
Which property determines the transformation origin point for CSS transforms used in animations?
Answer: transform-origin
The `transform-origin` property sets the point around which a transformation is applied, defaulting to the element's center (50% 50%).