Transitions Flashcards
What does the transition-property CSS property do?
The transition-property CSS property specifies which CSS properties should have transition effects applied to them when their values change.
“transition-property - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 26, 2023.
What is the syntax of the transition-property CSS property?
transition-property: property-1, property-2, ...;
Values
-
all: Applies transitions to all properties that can be animated. -
none: No transitions are applied.
Example values: all, width, background-color, none.
“transition-property - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 26, 2023.
What does the transition-duration CSS property do?
The transition-duration CSS property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.
“transition-duration - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 26, 2023.
What is the syntax of the transition-duration CSS property?
transition-duration: time-1, time-2, ...;
Values
- The time values can be given in seconds (e.g.,
2s) or milliseconds (e.g.,2000ms).*
Example values: 0.5s, 300ms
“transition-duration - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 26, 2023.
What does the transition-timing-function CSS property do?
The transition-timing-function CSS property specifies how the intermediate values of a CSS transition are calculated, essentially defining the “easing” function for the transition.
“transition-timing-function - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 26, 2023.
What is the syntax of the transition-timing-function CSS property?
transition-timing-function: function-1, function-2, ...;
Values
-
linear: Transition occurs at a constant speed. -
ease: Starts slow, accelerates, then ends slowly. -
ease-in: Starts slow and accelerates. -
ease-out: Starts fast and decelerates. -
ease-in-out: Starts slow, accelerates, then decelerates. -
cubic-bezier(n,n,n,n): Define a custom easing function using a cubic Bézier curve with control points. -
step-start, step-end, steps(n, jump): Define a step function with a specified number of steps and jump behavior.
Example values: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n), step-start, step-end, steps(n, jump)
“transition-timing-function - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 26, 2023.
What does the transition-delay CSS property do?
The transition-delay CSS property specifies the time to wait before starting a CSS transition when the specified property changes.
“transition-delay - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 26, 2023.
What is the syntax of the transition-delay CSS property?
transition-delay: time-1, time-2, ...;
Values
- The time values can be given in seconds (e.g.,
1s) or milliseconds (e.g.,1000ms).
Example values: 0s, 200ms
“transition-delay - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 26, 2023.
What does the transition CSS shorthand property do?
The transition CSS property is a shorthand for setting the transition-property, transition-duration, transition-timing-function, and transition-delay properties in a single declaration.
“transition - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 26, 2023.
What is the syntax of the transition CSS shorthand property?
transition: property duration timing-function delay;
Values
- Order of values is important: property (required), duration (required), timing-function (optional, default is ease), delay (optional, default is 0s).
- Multiple transitions can be specified, separated by commas:
transition: width 0.5s ease-out 100ms, height 0.3s linear;
Example:
~~~
transition: width 0.5s ease-out 100ms;```
“transition - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 26, 2023.
How can you apply CSS transitions using pseudo-classes?
To apply CSS transitions when an element is in a specific state, use the :hover, :focus, :active, or :checked pseudo-classes. Add the transition properties to the base state of the element and define the property changes within the pseudo-class rule.
Example of using CSS transitions with the :hover pseudo-class
button {
background-color: blue;
transition: background-color 0.3s ease-in-out;
}
button:hover {
background-color: red;
}
How can you set different durations and delays for multiple properties?
Specify separate durations and delays for each property by listing them in the same order as the properties in the transition-property rule. Use commas to separate values for different properties.
Example of setting different durations and delays for multiple properties
.box {
transition-property: width, height, background-color;
transition-duration: 0.5s, 1s, 0.3s;
transition-delay: 0s, 100ms, 200ms;
}
In this example, the width transition has a 0.5s duration and no delay, the height transition has a 1s duration and a 100ms delay, and the background-color transition has a 0.3s duration and a 200ms delay.
Create a CSS rule that applies a transition to the background-color property, with a duration of 0.8 seconds, an ease-in-out timing function, and a delay of 300 milliseconds.
{
transition-property: background-color;
transition-duration: 0.8s;
transition-timing-function: ease-in-out;
transition-delay: 300ms;
}Create a CSS rule that applies a transition to both the width and height properties, with a duration of 1 second and a linear timing function.
{
transition-property: width, height;
transition-duration: 1s;
transition-timing-function: linear;
}Using the transition shorthand property, create a CSS rule that applies a transition to the opacity property, with a duration of 0.6 seconds, a cubic-bezier(0.25, 0.1, 0.25, 1) timing function, and no delay.
transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
Create a CSS rule that applies a transition to the font-size property, with a duration of 0.3 seconds, an ease-in timing function, and a delay of 100 milliseconds. Apply this transition to a paragraph element when it is being hovered.
p {
transition: font-size 0.3s ease-in 100ms;
}
p:hover {
font-size: 1.5em;
}Create a CSS rule that applies a transition to the border-radius property, with a duration of 1.5 seconds and a linear timing function. Use the transition shorthand property for this rule.
div { transition: border-radius 1.5s linear; }Create a CSS rule that applies a transition to both the color and background-color properties of a button element. The transition for the color property should have a duration of 0.4 seconds and an ease-out timing function, while the transition for the background-color property should have a duration of 0.6 seconds and a cubic-bezier(0.42, 0, 0.58, 1) timing function. Apply this transition when the button is focused.
button {
transition-property: color, background-color;
transition-duration: 0.4s, 0.6s;
transition-timing-function: ease-out, cubic-bezier(0.42, 0, 0.58, 1);
}
button:focus {
color: white;
background-color: green;
}Create a CSS rule that applies transitions to the width, height, and opacity properties of a div element. The transitions should have the following properties:
-
width: 0.8s duration, ease-in-out timing function, 0s delay -
height: 1.2s duration, ease timing function, 200ms delay -
opacity: 0.5s duration, linear timing function, no delay
Use the transition shorthand property for this rule.
div { transition: width 0.8s ease-in-out 0s, height 1.2s ease 200ms, opacity 0.5s linear; }What is the linear timing function usually used for?
The linear timing function is often used when you want a simple, predictable, and uniform transition. It’s suitable for scenarios where the change in the property doesn’t require any emphasis or gradual speed adjustments.
For example, it can be used for:
- Moving an element at a constant speed across the screen.
- Changing the background color of an element uniformly.
- Progress bars or loading indicators with a steady pace.
Example:
.element {
/* Initial state */
background-color: blue;
transition: background-color 2s linear;
}
.element:hover {
/* Final state */
background-color: red;
}
In this example, the background color of the .element will change from blue to red uniformly over 2 seconds when hovered over, without any acceleration or deceleration.
“transition-timing-function - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 3, 2023.
What is the ease-in timing function usually used for?
ease-in timing function is used when you want a transition to start slowly and then accelerate towards the end. It is ideal for situations where you want to draw attention to the change or create an impression of momentum. Examples of ease-in use cases include:
- Revealing a hidden element, such as a tooltip or a dropdown menu.
- Expanding a collapsible panel or an accordion.
- Moving an element onto the screen from an off-screen position.
“transition-timing-function - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 3, 2023.
What is the ease-out timing function usually used for?
ease-out timing function is used when you want a transition to start quickly and then decelerate towards the end. It is suitable for situations where you want a smooth, gentle exit of the transition or a more natural-feeling movement. Examples of ease-out use cases include:
- Hiding an element, such as a tooltip or a dropdown menu.
- Collapsing a panel or an accordion.
- Moving an element off the screen or to another position.
“transition-timing-function - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 3, 2023.
