@starting-style – transition de display
HTML
index.html <label for="c1">Click me</label>
<input id="c1" type="checkbox">
<div class="box"></div>
CSS
style.css @layer demo {
.box {
opacity: 0;
display: none;
/* enumarate transitioning properties, including display */
transition: opacity 1s, display 1s allow-discrete;
}
/* Active state when :checked */
:checked + .box {
opacity: 1;
display: block;
}
/* @initial for elements that aren't rendered in the DOM initially.
In this case, we have a `display: none` element, so we need to look
up the initial state to caclulate a before-change style */
@starting-style {
/* 0. Before-change state */
:checked + .box {
opacity: 0;
/* You don't duplicate `display: none` here
because it's already in the initial `.display-on-check`
but you do need `opacity: 0`*/
}
}
}
@layer demoStyles {
:root {
--border-color: green;
}
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
justify-content: start;
color: white;
padding-top: 5vw;
}
label {
--border-color: red;
border-radius: 15px;
border: none;
padding: 1rem 2rem;
font-size: 2rem;
color: var(--border-color);
background-image: linear-gradient(45deg, black, #222);
box-shadow: 0 0 20px 0px var(--border-color),
inset 0 0 20px 0px var(--border-color);
border: 1px solid white;
&:has(+ input:checked) {
--border-color: green;
}
}
.box {
width: 200px;
height: 100px;
border-radius: 15px;
background: red;
}
input[type="checkbox"] {
visibility: hidden;
}
}