MW211 EXIT

devlog
CSS/点滅
2017年11月29日
CSSで点滅させる方法。
(これだとJavaScriptでタイマを仕込んで定期的にトグルとかしなくてもよくなる)

まず、keyframes定義にて何らかの名称で属性を定義する。
ここでは「BLINK」という名称で定義した。
┌──────────────────────────────────────┐
│@keyframes BLINK {                                                          │
│    0% {                                                                    │
│        opacity :1.0;                                                       │
│    }                                                                       │
│    50% {                                                                   │
│        opacity :0;                                                         │
│    }                                                                       │
│}                                                                           │
└──────────────────────────────────────┘
「opacity」とは不透明度のことであり、「0」が透明となる。
つまり、始点(0%)では不透明(点灯)、終点では透明(消灯)となる指定を
「BLINK」に定義している
なお、本来終点は「100%」だが、後述の様に変化を一段で行うため、
今回は真ん中の「50%」を終点と見立てている

後は、それを各要素に対して、animation属性として定義してあげればOK。
┌──────────────────────────────────────┐
│div.light {                                                                 │
│    background-color    :#FFFF00;                                           │
│    animation           :BLINK 1.0s steps(1,end) 0s infinite normal;        │
│}                                                                           │
└──────────────────────────────────────┘
パラメータの詳細は以下のような感じ。
┌──────┬───────────────────────────────┐
│BLINK       │keyframes定義で定義した「BLINK」属性を用いる                  │
├──────┼───────────────────────────────┤
│1.0s        │処理周期1秒(1秒で点灯から消灯まで行われる)                    │
├──────┼───────────────────────────────┤
│steps(1,end)│変化の度合い                                                  │
│            │緩やかに変化させることもできるが、点滅なので、変化は一段のみ  │
├──────┼───────────────────────────────┤
│0s          │開始までの時間0秒(つまり、すぐ開始)                           │
├──────┼───────────────────────────────┤
│infinite    │繰り返し回数、無限(永久)                                      │
├──────┼───────────────────────────────┤
│normal      │順方向のみ                                                    │
└──────┴───────────────────────────────┘
分類:HTML5+CSS3