【CSS】点滅アニメーションの書き方と使い方｜WordPress編
zio
ジオ～～、トップページにあった
＼キーワードを入力して検索／
ってどうやってやるの？やってみたい！
うん！やってみよっかー。
私もブログ友達のはっちゃんから教えてもらったんだ～。
今回は、様々な場面で使える『点滅アニメーション』の作り方を最短で説明します。この点滅アニメーションはCSSというプログラミングでつくります。CSSの説明は割愛しますが、気になる方はググってみてね。
ブログ友達のはっちゃん（@hacchan_15）の元の記事はコチラです↓この記事よりも詳しい内容です。
https://turicco.com/blinking byはっちゃん 出典『Turicco』
CSSを書く
今回は
WordPress管理画面→［外観］→［カスタマイズ］→［追加CSS］にCSSに書いていきます。
え？早速プログラミング書くの？
うん！書くよ。
まずは今日書く【点滅CSS】を観察してみよ。
今日書く【点滅CSS】
＼キーワードを入力して検索／
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
.blink1 {
animation: blinking 5s ease-in-out infinite alternate;
}
このままだと、何のことだかさっぱりわからないと思うのでCSSの意味を翻訳しました。
CSSの意味を翻訳
元のCSSを色分けしたよ。翻訳と照らし合わせて意味を確認してみてね。
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
.blink1 {
animation: blinking 5s ease-in-out infinite alternate;
}
↓意味を翻訳すると
＠アニメーションの動きの定義 blinkingは…
０％の時に完全に透明になる
100％の時に完全に不透明になる
.blink1 は
アニメーションCSSで blinkingっていう定義を使って 5秒間 ゆっくり始まって-ゆっくり終わる 永久に 交互に繰り返す
という構成になっています。ピンク枠は青枠のblink1アニメーションの要素の一つ「blinking」の定義を説明をしています。ここでは意味が何となくわかればOKです。
追加CSSに書く
次は実際に［追加CSS］に書いてみましょう！
- WordPress管理画面→［外観］→［カスタマイズ］→［追加CSS］を開き書いていきます
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
.blink1 {
animation: blinking 5s ease-in-out infinite alternate;
}
- １の横から書いていき↓のようになります。
- 書き終わったら確認して［公開］をクリックします。これで 「blink1」というCSSが登録されました。
書くときに注意したいこと
- 必ず半角英数字で入力しましょう
- ：（コロン）と；（セミコロン）が文中に出てきます。間違わないように確認しながら書いてみましょう。
- 〈 〉や｛ ｝や（ ）などのカッコは必ずペアです。片方だけにならないように確認してください。
- blink1の前には . （ピリオド）があります。忘れないように注意してください。
PR｜CSSの基本をしっかり学びたい方へ
ポチップ
Zioも読んでいます
CSSを反映させる
次は登録されたアニメーション 「blink1」を点滅させたいところに反映していきます。
反映させる
１．反映させたい文や画像にカーソルをあわせ、WordPress編集画面の［設定］→［高度な設定］→［追加CSSクラス］と開き追加CSSクラスの枠内に「blink1」を入力します。
追加CSSクラスにblink1を書くときは、blink1の前にあったピリオド（.）は書きません。
２．下書き保存または保存をして、プレビューしましょう。
＼キーワードを入力して検索／
blink1が文字や画像に反映されていれば完成です。うまく反映されない場合は追加CSSに戻って、書いたCSSをチャックしてみましょう。
応用：他のCSSが［追加CSSクラス］にすでにある時は、半角スペースを使ってCSSとCSSを分けます。
より詳しく点滅CSSを知りたい方は、ブログ友達 はっちゃん（@hacchan_15）の記事がおすすめ！Cocoonのカスタマイズで有名なはっちゃんですがその他のWordPressテーマでもつかえるカスタマイズ方法を多数公開しています。見てみてね。
https://turicco.com/blinking byはっちゃん 出典『Turicco』
点滅させる時間を変えたり、不透明にする割合を１から0.8に変えたりしてアレンジする頃ができます。インターネットで検索する時は『点滅CSS 書き方』で調べてみてください。またコチラ↓の書籍もおすすめです。アニメーションCSSも詳しく書かれています。仕組みが知りたい方は是非読んでみてください。
PR｜CSSの基本をしっかり学びたい方へ
ポチップ
Zioも読んでいます
