You're creating a button hover effect where the button scales up gradually. Which combination of CSS properties would you primarily use?
- transform: scale(1.2);
transition: transform 0.3s ease-in-out; - transition: scale(1.2) 0.3s ease-in-out;
transform: scale(1.2); - scale(1.2);
transition: transform 0.3s ease-in-out; - transform: scale(1.2);
animation: scaleUp 0.3s ease-in-out;
To create a button hover effect where the button scales up gradually, you would primarily use the combination of CSS properties: transform: scale(1.2); for scaling the button and transition: transform 0.3s ease-in-out; to specify the transition duration, easing function, and the property to be transitioned (in this case, "transform"). This combination smoothly scales up the button on hover.
If you want an animation to play forwards first, then reverse on alternate cycles, which value of animation-direction would you use?
- alternate
- alternate-reverse
- normal
- reverse
To make an animation play forwards first and then reverse on alternate cycles, you would use the animation-direction property with the value alternate-reverse. This value causes the animation to run normally on odd iterations (forwards) and in reverse on even iterations.
The ::first-letter pseudo-element in CSS targets the ________ of a block-level element.
- First character
- First letter
- First line
- First word
The ::first-letter pseudo-element in CSS is used to target the first letter of a block-level element, such as a paragraph or a heading. It's commonly used for styling the initial letter of a text block, for decorative or typographic purposes.
Which of the following is NOT a unit for font-size in CSS?
- cm
- em
- ex
- px
In CSS, font-size can be specified in various units, including em, ex, px, and cm. However, 'cm' is not a common unit for font-size. It's typically used for specifying dimensions of other elements, like margins or padding.
In a React application, you are tasked with styling a button that changes its background color based on a prop passed to it. Which CSS-in-JS library would be ideal for this?
- Styled-components
- Bootstrap
- Tailwind CSS
- SCSS
Styled-components is a popular CSS-in-JS library for React. It allows you to define component styles directly in your JavaScript code and can easily style components based on props, making it ideal for dynamic styling based on prop values.
The cubic-bezier function for animation-timing-function takes in ______ arguments to define the curve.
- 1
- 2
- 3
- 4
The cubic-bezier function in CSS, used for defining custom timing functions for animations, takes in three arguments. These three arguments represent the control points of the cubic Bezier curve, allowing precise control over the animation's progress.
The value calc() in CSS allows you to perform ________.
- Animation effects
- Conditional statements
- Mathematical operations on numeric values
- Text manipulation
The value calc() in CSS allows you to perform mathematical operations on numeric values. It is a powerful feature that enables you to calculate values for various CSS properties, making it useful for responsive design and layout.
You've noticed that your web fonts are causing a delay in page rendering. Which property can you adjust to control how these fonts are displayed during the load process?
- font-display
- font-family
- font-rendering
- font-weight
To control how web fonts are displayed during the load process, you can adjust the font-display property in CSS. This property allows you to specify how the browser should handle font loading and rendering, with options like auto, swap, block, fallback, and optional. It helps you optimize the user experience when web fonts are slow to load or unavailable.
To apply an ease-in-out timing function to a transition, you'd set transition-timing-function to ________.
- ease-in
- ease-in-out
- ease-out
- linear
In CSS transitions, the transition-timing-function property controls the timing function for the transition. The ease-in-out option creates a smooth transition that starts slowly, accelerates in the middle, and slows down at the end. This is a common choice for animations that feel natural and pleasing to the eye.
Which CSS property allows you to control the speed curve of an animation?
- animation-ease
- animation-speed-curve
- animation-timing-function
- animation-transition
The animation-timing-function property is used to control the speed curve of an animation. It allows you to specify how the animation progresses through time, giving you control over the easing and acceleration of the animation.