どうも！LSSです！！
今回はCSS小ネタになります。
サンプル
文章の途中に、例えばこんな感じで枠で囲んだ部分があり、その枠がたまに太く薄くなる、そんなサンプルです。
コード
<style><!--
@keyframes buwa{
0%{outline-width:4px;outline-color:#0000ff80;}
60%{outline-width:4px;outline-color:#0000ff80;}
90%{outline-width:20px;outline-color:#ddddff40;}
100%{outline-width:4px;outline-color:#0000ff80;}
}
.buwaku{
outline-style:solid;
padding:2px;
animation:buwa 6s linear 0s infinite normal;
}
--></style>
<p>文章の途中に、<span class="buwaku">例えばこんな感じ</span>で枠で囲んだ部分があり、その枠がたまに太く薄くなる、そんなサンプルです。</p>
使い方
コード中の、<style>タグ部分
<style><!--
@keyframes buwa{
0%{outline-width:4px;outline-color:#0000ff80;}
60%{outline-width:4px;outline-color:#0000ff80;}
90%{outline-width:20px;outline-color:#ddddff40;}
100%{outline-width:4px;outline-color:#0000ff80;}
}
.buwaku{
outline-style:solid;
padding:2px;
animation:buwa 6s linear 0s infinite normal;
}
--></style>
を、書いておきます。
あとは、文章中、枠をつけたい部分を
<p>文章の途中に、<span class="buwaku">例えばこんな感じ</span>で枠で囲んだ部分があり、その枠がたまに太く薄くなる、そんなサンプルです。</p>
のように、
<span class="buwaku">
と
</span>
で挟んでやると、何か所でも この変な枠 で囲む事ができますｗ
キーフレームアニメーションの内容
0%{outline-width:4px;outline-color:#0000ff80;}
60%{outline-width:4px;outline-color:#0000ff80;}
90%{outline-width:20px;outline-color:#ddddff40;}
100%{outline-width:4px;outline-color:#0000ff80;}
４行書いていますが、うち 90% の行だけが他と異なります。
この%は「アニメーション開始から経過した時間」の割合です。
（一回の再生にかかる時間は、別途「animation:buwa 6s linear 0s infinite normal;」で指定した６秒）
0%の行…経過時間 0%、つまり「アニメーションが始まったばかりの時」の状態を指定しています。（枠の幅 4ピクセル、枠の色は#0000ff80）
60%の行…経過時間 60%、6秒の再生時間の60%なので、「3.6秒たった時点」の状態を指定しています。
… 0%の時と同じ値にしているので「開始から3.6秒たつまでの間は最初の状態から変化しない」という事になります。
90%の行…経過時間 90%、「5.4秒たった時点」では、さっきまでと違う値を指定しています。（枠の幅20ピクセル、枠の色#ddddff40）
こうしておくと、「3.6秒時点では4ピクセルだった幅が5.4秒時点で20ピクセルになるように、（5.4-3.6=1.8秒かけて）変化する（色も同様）」事になります。
100%の行…経過時間 100%、つまり「アニメーション終了時点」で、また最初と同じ値を指定しています。
これにより、「5.4秒時点で変化していたものが、終了（6秒経過）時点までの間に（6-5.4=0.6秒かけて）元に戻る」事になります。
【CSS】borderによく似た、outlineというCSSプロパティを試してみます【実験】
CSSでkeyframesのanimationをやってみた！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
