16. HTML - CSS - animation アニメーション

 
16.1 概要
16.2 やってみる

16.1 概要

 別の項で書いていますが「text-decoration-line: blink;」で、文字が点滅しなくなったので焦っていたら、こちらを使うようになったようです。  詳細は「animation - CSS: カスケーディングスタイルシート | MDN」をご参照ください。  本項「CSSでテキスト、画像、何でも点滅!」を参考にさせていただきました。

animation: 名前 所要時間 周期の進行状況 ... ええい長い;
 細かい説明は、いずれ時間のあるときに・・・。先を急ぐので 追而書

16.2 やってみる

 参考サイトのように

.blink
{
	-webkit-animation:blink 1.0s ease-in-out infinite alternate;
	-moz-animation:blink 1.0s ease-in-out infinite alternate;
	animation:blink 1.0s ease-in-out infinite alternate;
}
@-webkit-keyframes blink
{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink
{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink
{
    0% {opacity:0;}
    100% {opacity:1;}
}
 というスタイルを定義して

<span class="blink">点滅するのか? ■■■</span>
 と書きましたらば、わたしの環境では、下の1行が点滅しております。
 点滅するのか? ■■■