- 1. 概要
- 2. 構文
- 3. やってみる
- 4. .scss で記述
1. 概要
別の項で書いていますが「text-decoration-line: blink;」で、文字が点滅しなくなったので焦っていたら、こちらを使うようになったようです。
本ページは、下記のサイトを参考にさせていただきました。
「CSSでテキスト、画像、何でも点滅！」
「animation - CSS: カスケーディングスタイルシート | MDN」
2. 構文
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
実際は、各プロパティのプリフィックス（接頭辞）に「animation-」が付きますが、長いので略しています。
一覧にしておきます（意味の理解できたものだけ、説明を記述）。
| プロパティ | 意味 | 備考 |
|---|
| animation-name | 名前 | |
| animation-duration | １周期の所要時間 | |
| animation-timing-function | それぞれの周期の中でどのように進行するか | |
| animation-delay | いつ開始するかを指定 | |
| animation-iteration-count | 再生回数 | |
| animation-direction | 向き | |
| animation-fill-mode | 実行の前後のスタイルを指定 | |
| animation-play-state | 実行中か停止中かを指定 | |
これら、個別のプロパティをそれぞれ別途指定できるらしいのですが、なんか間違えているのか、やってみたらうまくいかなかったので、一気に書くようにしています。
「animation」の場合、一気に指定するわけですが、末尾から順に省略できるらしく、前の３つのみで用を足すこともできるようです。
詳細は「animation - CSS: カスケーディングスタイルシート | MDN」をご参照ください。
3. やってみる
参考サイトのように
.myblink
{
-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>
と書きましたらば、わたしの環境では、下の１行が点滅しております。
点滅するのか？■■■
4. .scss で記述
さすがに、前項はちょっと長いですね。
後述、「.scss」で単純に書きたいところです。
現在、「Visual Studio Code」の「Live Sass Compiler」を使っておりまして。
「autoprefix」には下記の設定を行っております。
"liveSassCompile.settings.autoprefix":
[
"> 1%",
"last 4 versions"
],
「.scss」に下記を記述しますと
.blink
{
animation: blink 1.0s ease-in-out infinite alternate;
}
コンパイル後の「.css」は、こうなります。
.blink {
-webkit-animation: blink 1.0s ease-in-out infinite alternate;
animation: blink 1.0s ease-in-out infinite alternate;
}
なんだ、これで十分なのね。
で下記の記述を行うと
<span class="blink" style="color: red; font-weight: bold;">ご注意あそばせ</span>
のように表示されます。
↓
ご注意あそばせ
2021年10月12日時点では「Chrome」「Edge」「Firefox」「Internet Explorer」「Opera」「Safari」「Vivaldi」で、同じアニメーション表示になることが確認できました。
（ただし、「Safari」は、フォントがかすれているし「prism」のシンタックスハイライトが効かないし、ちょっとダメダメです）
|
