[css] animation / transition 中の backdrop-filter が効かない！

Chrome でアニメーション中に backdrop-filter を使おうとしても動いてくれなかったので対応方法を備忘録として残します。

実際に動くサンプルがこちらです。

結論

背景色を入れればOK！

background-color: rgba(255, 255, 255, 0.01);

不透明度 0.01 の白を背景色にしたら動きました！
（色は何でもOKです）

ここから先は特に関係ない解説なので読まなくてもOKです。

Safari では background-color の指定がなくても動くので Chrome の不具合かもしれません。
なお css の仕様は確認してません。

ソースコード

今回はメニューの背景用 backdrop-filter です。
つまり普段は非表示で、メニュー使用時だけ表示します。

<span class="backdrop" data-state="init"></span>

CSS全文がこちらです。

.backdrop{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  
  // ここがポイント！！
  background-color: rgba(255, 255, 255, 0.01);
  
  &[data-state="init"]{
    // 初期状態は高さ 0
    height: 0;
  }
  &[data-state="on"]{
    // 表示アニメ
    animation-name: backdrop-on;
  }
  &[data-state="off"]{
    // 非表示アニメ
    animation-name: backdrop-off;
  }
}

@keyframes backdrop-on{
  0%{
    height: 100%;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
  100%{
    height: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

@keyframes backdrop-off{
  0%{
    height: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  99%{
    height: 100%;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
  100%{
    // 最後に高さを 0 に戻す
    height: 0;
  }
}

解説

初期状態では data-state 属性を init にしてあり、css で高さを 0 にしています。

<span class="backdrop" data-state="init"></span>

  &[data-state="init"]{
    height: 0;
  }

data-state="on" になると @keyframes backdrop-on が動きます。

  &[data-state="on"]{
    animation-name: backdrop-on;
  }

@keyframes backdrop-on{
  0%{
    height: 100%;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
  100%{
    height: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

そして data-state="off" になると @keyframes backdrop-off が動きます。

  &[data-state="off"]{
    animation-name: backdrop-off;
  }

@keyframes backdrop-off{
  0%{
    height: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  99%{
    height: 100%;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
  100%{
    // 最後に高さを 0 に戻す
    height: 0;
  }
}

99% でアニメーション演出は終了して、最後の 100% で高さ 0 に戻しています。