The modern CSS standard offers two solutions for creating smooth animations for DOM elements:

1. Switching CSS property values smoothly based on user interactions with the transition property.
2. Implementing keyframes-based advanced animations using the animation property.

The second approach requires defining keyframes, so the @keyframes at-rule. Look at the following example:

<div class="board">CSS</div>

@keyframes board-anim {
  0%, 85%, 100% {
    filter: blur(0px);
  }
  90% {
    filter: blur(5px) contrast(200%);
  }
}

.board {
  padding: 12px 50px;
  font-size: 24px;
  font-weight: bold;
  background-color: #ff9d00;
  color: #222;
  display: inline-block;
  animation: board-anim 3s infinite linear;
}

Sometimes, users need to print web pages on physical papers for offline use. Also, some users print web pages as PDF documents to save for future use. Some web apps offer server-based features to generate paper-friendly PDF documents, but you can also print any web page using the browser’s native printing feature.

The `page` CSS at-rule offers a way to customize page dimensions, orientation, and margins of printed pages without affecting the visible browser viewport. For example, the following CSS snippet sets a 1-inch margin and A4 landscape size for printed pages:

@page {
  size: A4 landscape;
  margin: 1in;
}

This at-rule comes with `:first`, `:blank`, `:left`, and `:right` pseudo-classes to select specific pages of the printed document. Browse the official MDN documentation to learn more details about `page`.

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.