CSS @starting-style Rule
Example
Use of @starting-style; let the box start with opacity 0, and let it fall down from the top:
.box {
width: 150px;
height: 150px;
background-color: pink;
opacity: 1;
transition: all 0.9s
ease;
@starting-style {
opacity: 0;
translate: 0 -80px;
}
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The @starting-style rule is used to define
an element's starting styles before
the element gets its first style update.
This can be used to create smooth entry and exit transitions for elements like popovers, modals, or any elements that change from display: none to a visible state.
Browser Support
The numbers in the table specify the first browser version that fully supports the at-rule.
| At-rule | |||||
|---|---|---|---|---|---|
| @starting-style | 117 | 117 | 129 | 17.5 | 103 |
CSS Syntax
@starting-style {
css declarations;
}
More Examples
Example
Use of @starting-style in a pop-over and dialog box:
#myPopover {
transition: opacity .5s ease-in, scale .5s ease-in;
@starting-style {
opacity: 0;
scale: 1.1;
}
}
#myDialog
{
transition: opacity .5s ease-in, scale .5s ease-in;
@starting-style {
opacity: 0;
scale: 1.1;
}
}
Try it Yourself »
