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;
}