New CSS Transition Updates for Chrome!
August CSS Transition Updates for Chrome Browser
Google Chrome recently released a bunch of updates for CSS support on its beta browser across its supported devices. In this article, we'll particularly look at the latest transition updates and support for CSS properties on the Chrome browser.
Requirement
The properties discussed here are recent updates made on the Chrome Beta browser. It is required to have it installed on your machine to see the effect of the properties mentioned here.
CSS Transition Updates
1. @starting-style at-rule
This is used to apply transitions on DOM elements that have been updated for the first time. Usually, this is not the case when elements are added to the DOM with transitions on them, but with the @starting-style at-rule you can add simple transitions to elements you want to add to the DOM or elements that have their style updated for the first time.
Here's what the basic code looks like.
HTML:
<body>
<section class="box" ></section>
<section class="box" ></section>
<section class="box" ></section>
<section class="box"></section>
<button id="add_button">Add box</button>
<script src='main.js'></script>
</body>
CSS:
.box{
display: inline-block;
width: 15rem;
height: 15rem;
margin: 1rem;
transition: opacity, background-color 5s;
background-color: blue;
opacity: 1;
}
@starting-style {
.box {
opacity: 0;
top: calc(2rem * var(--index));
background-color: white;
}
}
JS:
This is mainly to add more section tags dynamically whenever the Add box button is clicked.
const body = document.querySelector("body");
const button = document.querySelector("#add_button")
button.addEventListener("click", () => {
let section = document.createElement("section");
section.classList.add("box");
body.appendChild(section);a
})
Here's how it'd look like in the Chrome beta browser.
Looks neat right? It's super awesome what you can do with CSS nowadays. Just think of the endless possibilities you can build with this and with less stress!
2. overlay property
This is intended to enable developers to know if an element is in the top layer for an exit transition or it is not. Currently, it's not possible for developers to add a transition to gracefully exit an element in the top layer (that is, the element in front of the main browser content e.g. dialog or modal box). Instead, it is removed immediately from the browser.
However, this property allows developers to defer that removal while applying CSS transitions on the modal to gracefully exit it in an awesome style. It currently has two values that it can take: none or auto.
Here's how the code is supposed to look once it's fully supported:
dialog {
transition: overlay 1.5s, opacity 1.5s, ease;
overlay: auto;
}
3. transition-behaviour property
The CSS transition-behaviour property allows discrete CSS properties to have transitions. If allow-discrete value is specified, CSS properties marked with Discrete as their animation type will now start their animation from their initial value to their final value at 50%. The only exception for this not to work is for transitions where the CSS display: none and content-visibility: hidden are either the initial or final values. Thus, the visible value will be used for the whole duration of the transition.
.element{
transition: all 4s ease-in;
transition-behaviour: allow-discrete;
}
I think this brings a whole lot of flexibility and freedom to developers when animating any property whatsoever. There's little to no limitation anymore when it comes to CSS animation and that's what makes this exciting. More headaches and new errors, but (hey)...it's exciting!
Conclusion
In this article, we discussed the recent CSS transition updates made on the Chrome browser. They are updates I feel would contribute nicely to CSS development in the future! Let me know what you think about these updates below or comment down any other property you're looking forward to the dev team adding to Chrome on its next update. Thanks for reading, I hope you have a nice day ahead!