Search Animation
Here’s the code for my slide in search dialog box. This uses some new CSS which at the time of writing is only working in chromium browsers.
The key bits are transition-behavior: allow-discrete and the new @starting-style rule.
The transition-behavior: allow-discrete changes how the transition from display: none to display: block works.
The display property is not animatable. Normally this changes occurs halfway through the animation. But when transition-behavior: allow-discrete it changes at the beginning of the animation going to display: block or the end when transitioning to display: none. This allows the animatable transitions like opacity and translate to work as they should, from the beginning to the end.
Based on a great Kevin Powell vid on this.
/* ======= Search dialog ============= */
#custom-search input {
font-size: 2em;
border: none;
padding: 0.1em;
background-color: var(--MainBorderColor);
color: currentColor;
}
.search-modal {
position: fixed;
height: 100vh;
width: min(100%, 750px);
margin: auto;
background-color: #0009;
border-radius: 1em;
border: none;
display: none;
translate: -100vh 0;
transition-duration: 1s;
transition-property: overlay display translate;
transition-behavior: allow-discrete;
}
.search-modal[open] {
display: block;
translate: 0 0;
@starting-style {
translate: 100vh 0;
}
}
.search-modal::backdrop {
background-color: #0009;
backdrop-filter: blur(4px);
transition-property: overlay display opacity backdrop-filter;
transition-duration: 1s;
transition-behavior: allow-discrete;
opacity: 0;
}
.search-modal[open]::backdrop {
opacity: 1;
}
/* In CSS you cannot nest inside pseudo elements so.. */
@starting-style {
.search-modal[open]::backdrop {
opacity: 0;
}
}
.search-close-btn {
position: absolute;
top: 0.5em;
right: 0.5em;
font-size: 2em;
aspect-ratio: 1 / 1;
background: darkred;
padding: 0 0.25em;
color: #fff;
border: none;
cursor: pointer;
}
#custom-search-field {
border-radius: 0.25em;
padding: 0.25em 1em;
}