

CSS でフェードアウト効果のアニメーションを作成しています。

フェードアウト後に要素を消すため、 `@keyframes` に `display: none`
を設定しましたが、フェードアウト完了後も要素が消えず、透明になったまま残ってしまいます。問題の再現する `@keyframes` は次のようになっています:

[code]

    @keyframes fade-out {
      0% {
        opacity: 1;
        display: block;
      }
      100% {
        opacity: 0;
        display: none;
      }
    }
    
[/code]

実際に動かしてみると、期待通りに動作しているように見えますが、フェードアウト完了後にテキスト周辺をドラッグすると **テキストを選択出来る** ので、
`display` プロパティが動作していないことがわかります。

[code]

    .text-box {
      border: 1px solid #ccc;
      animation: fade-out 3s forwards;
    }
    
    @keyframes fade-out {
      0% {
        opacity: 1;
        display: block;
      }
      100% {
        opacity: 0;
        display: none;
      }
    }
[/code]

[code]

    <div class="text-box">
      テキスト
    </div>
[/code]

`@keyframes` 内の `display` プロパティはどのように動作するのでしょうか？また、この問題はどうすれば解決出来ますか？


CC BY-SA 4.0
2020-07-25T05:25:44.890
68933
2020-07-25T05:31:52.060
32986
question
css
display プロパティが @keyframes を用いたアニメーションで動作しない理由は？


Web Animations によれば、`@keyframes` 内にアニメーションが不可能であるプロパティが存在した場合、それは
**無視されます**[[1]](https://www.w3.org/TR/web-animations-1/#animating-
properties)。今回の場合、 `display` プロパティは
**アニメーションが不可能**[[2]](https://drafts.csswg.org/css-display/#the-display-
properties)であるため、フェードアウト用アニメーションの `display` プロパティは無視され、動作しません。

> ### 5.2. Animating properties [[1]](https://www.w3.org/TR/web-
> animations-1/#animating-properties)
>
> **not animatable**  
>  The property is not animatable. It is not processed when listed in an
> animation keyframe, and is not affected by transitions.

* * *

この問題を解決するための一つの解決策として、アニメーションの終了するタイミングで JavaScript により `display: none`
を設定する、という方法があります。

[code]

    document.addEventListener("DOMContentLoaded", function() {
      setTimeout(() => document.querySelector(".text-box").style.display = "none", 3000);
    });
[/code]

[code]

    .text-box {
      border: 1px solid #ccc;
      animation: fade-out 3s forwards;
    }
    
    @keyframes fade-out {
      0% {
        opacity: 1;
        display: block;
      }
      100% {
        opacity: 0;
        display: none;
      }
    }
[/code]

[code]

    <div class="text-box">
      テキスト
    </div>
[/code]

もしくは、 `position`, `width`, `height`, `overflow` プロパティなどを用いて、
**見かけ上は要素が消えたように見せる** という方法もあります。しかし、要素は依然としてドキュメントツリー上に残っており、設定された `margin` や
`padding` プロパティなどの影響も受けるため、 **使用出来る場面が限定** されます。

[code]

    .text-box {
      border: 1px solid #ccc;
      animation: fade-out 3s forwards;
    }
    
    @keyframes fade-out {
      0% {
        opacity: 1;
      }
      99% {
        position: static;
      }
      100% {
        opacity: 0;
        position: absolute;
        top: -9999px;
        left: -9999px;
      }
    }
[/code]

[code]

    <div class="text-box">
      テキスト
    </div>
[/code]


CC BY-SA 4.0
2020-07-25T05:31:52.060
68934
2020-07-25T05:31:52.060
32986
68933
answer