CSS animation opacity（透明）を使って明滅させる方法

CSS animation opacity（透明）を使って明滅させる方法を説明します。

とはいえ、基本的なアニメーションの使い方がわかっていればカンタンです。
CSSのanimationのkeyframesの使い方【サンプルあり】

完成イメージ

html

<div class="animation"></div>

CSS

.animation{
    width: 20px;
    height: 20px;
    background: red;
    margin: 20px;
    animation: ugoki 1s linear infinite alternate;
}
@keyframes ugoki{
    0%{
        opacity: 0;
    }  
    100%{
        opacity: 1;
    }
}

まとめ

上記のようにopacityの0と1のアニメーションを繰り返すことで明滅させることができます。

tranditionでも透明にできますが、それは1回っきりです。

繰り返しの動きをつけたいときanimationは便利です。

以上、animation opacity（透明）を使って明滅させる方法でした。