Transition sans @starting-style
HTML
index.html <label for="c1">Click me</label>
<input id="c1" type="checkbox">
<div class="box"></div>
CSS
style.css /* it works but the element still displayed */
@layer demo {
.box {
transition: background-color 1s, opacity 1s;
background: red;
opacity: 0;
}
input:checked + .box {
background: yellow;
transition: background-color 1s, opacity 1s;
opacity: 1;
}
}
@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;
}
}
input[type="checkbox"] {
visibility: hidden;
}
.box {
width: 200px;
height: 100px;
border-radius: 15px;
}
}