📄 Adding Initial DOM Rendering Transitions with @starting-style

#css #startingStyle

When a DOM element gets rendered from an HTML document or JavaScript code snippet, it gets rendered without any initial transition animation. In the past, we typically implemented these initial animations with dynamically switched CSS classes via JavaScript. Nowadays, we can use CSS animations for these situations, but the initial animation concept undoubtedly belongs to the CSS transitions feature. The `starting-style` at-rule lets you set initial styles for a CSS selector, so you can build up a transition animation for the initial rendering step:

button {
  padding: 12px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  background-color: #bbb;
  opacity: 1;
  transform: scale(1);
  transition: all 1s linear;
  
  @starting-style {
    opacity: 0;
    transform: scale(0.5);
  }
}

The above code snippet plays a transition animation when a button element gets rendered on the viewport. This transition works even though you dynamically create a new element with JavaScript.