%blur-animation-fade-in {
  backdrop-filter: blur(10px);

  animation-name: blur-animation-in;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-play-state: running;
  animation-timing-function: ease-in-out;

  @keyframes blur-animation-in {
    from {
      backdrop-filter: blur(10px) opacity(0);
    }
    to {
      backdrop-filter: blur(10px) opacity(1);
    }
  }
}

%blur-animation-fade-out {
  backdrop-filter: blur(10px);

  animation-name: blur-animation-out;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-play-state: running;
  animation-timing-function: ease-in-out;

  @keyframes blur-animation-out {
    from {
      backdrop-filter: blur(10px) opacity(1);
    }
    to {
      backdrop-filter: blur(10px) opacity(0);
    }
  }
}