Focus-within trigger
Trigger the animations on input box focus
Overview
A focus-within trigger executes the animation on the parent element when the child <input> element is focused. It could be a text, number or any supported input element. When triggered, the animation starts to play in the normal direction from start to end. When the element is “unfocused” (gets the focusout event), the animation switch to backward direction and will play from the current state back to the start.
Syntax
To activate the focus-within trigger, use the focus-within. A CSS property is animated when the element receives the focused state.
Examples
These examples show the usage of the focus-within trigger on the parent element with the violet background. When child input element is focused, parent element will change the background color and gets a shadow.
Discrete timeline
Discrete timeline is the basic timeline that animate the properties when the focus-within trigger is executed on the element.
<!-- Number input element -->
Sequenced timeline
Sequenced timeline animates the CSS properties in the sequence of steps using the focus trigger.
Offset-based timeline
Offset-based timeline combine the CSS-offsets with the sequence of steps to animate the properties, triggered by a focus-within action.
Combination
The focus-within trigger can be combined with any other available triggers.
Parameters
Trigger can be customized with the parameters that are defined within its parentheses ().
Target
The target parameter specifies the external element on the page where the current trigger is applied. This means you can define an animation that starts when a trigger on a different element is activated. A real-world example: clicking the hamburger menu button makes an off-screen sidebar appear.
Options
The id, class and attribute CSS selectors can be used.
| Name | Value | Default | Description |
|---|---|---|---|
target |
class | id | attribute |
null |
CSS selector |
Examples
In these examples, we’ll use a <input id="example" type="text"> as the target element where the focus-within trigger is applied. This will then affect elements that reference #text as their target parameter.
For better clarity, you can interpret it as: When the focus-within trigger is activated on the #text target element, the scale(2) CSS property is animated.
id selector
| Value | Example | Shorthand |
|---|---|---|
#{id-name} |
focus-within(target: #navigation) |
focus-within(#navigation) |
This examples shows how to use a target parameter with an id CSS selector defined with the #{id}.
<!-- Actual element that will be scaled -->
<!-- Shorthand -->
class selector
| Value | Example | Shorthand |
|---|---|---|
#{class-name} |
focus-within(target: .navigation) |
focus-within(.navigation) |
This examples shows how to use a target parameter with a class CSS selector defined by the .{class-name}.
<!-- Actual element that will be scaled -->
<!-- Shorthand -->
attribute selector
This examples shows how to use a target parameter with a attribute CSS selector defined by the [{attribute}]
| Value | Example | Shorthand |
|---|---|---|
[{attribute}] |
focus-within(target: [data-animal="cat"]) |
- |
<!-- Actual element that will be scaled -->
<!-- No shorthand -->