どうも！LSSです！！
以前、【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集という、それまでに作成したCSSサンプルのまとめ記事を書いていました。
気づけばそれから１年近く経ち、その間にもちょこちょこ作っていたので、その後に作ったものをまとめてみます！
…と言いつつ、見てみると結構作ってるものがバラバラで^^;
書き出すと「まとまりのないまとめ」になりそうだったので、様々なネタの中から
「アニメーションするボックス（枠）」
のまとめ記事とします^^
マウスカーソルに反応するタイプ
カードをめくる その２
↑クリックしてみてください^^
表面・裏面をそれぞれ用意しておき、「位置を重ねる・片方は１８０度回転した状態にする」ところから、両面ともに１８０度回転する事で実現しています。
…と理屈を書くとややこしいのですが、↓の記事にあるコードコピペで使えます。
【CSS】カードをめくる その２ - Little Strange Software
光が斜めに横切るバー
この「きらーん☆」って感じがいいですね^^（自画自賛）
カーソルを乗せた時、離した時、スマホではタップした時、その後別のところをタップした時に、斜めの白い筋が横切ります。
【CSS】transitionで光が斜めに横切るバーを作ってみました【小ネタ】 - Little Strange Software
たたっ斬る！
こっちは「ズバァァッ！！」って感じｗ
上に乗ってる色と文字の色を合わせる事で、隠し文字としても機能しています。
【CSS】たたっ斬る！！【小ネタ】 - Little Strange Software
マウスカーソルで枠線の太さが変わる演出
borderによく似た「outline」というプロパティを使用しています。
同じ事をborderでやろうとすると、要素のサイズが変わってしまいます。
↓のサンプルでは後のほうで実際にborderで作った例もありますｗ
【CSS】マウスカーソルで枠線の太さが変わる演出！【outlineの有効活用！？】 - Little Strange Software
丸から四角に変形するボックス
brタグによる改行もできます。
この部分の文章は好きに変更できます！
右にあるピンク色の丸にカーソルをのせてみてください。
なんか「ハンバーガーメニュー」について考えているうちに思いつきました。
【CSS】丸から四角に変形するボックス - Little Strange Software
また、このネタにはさらに後日追加したパターンがあります。
余談：ハンバーガーメニューって - Little Strange Software
カーソルを乗せると動くグラデーションバー
ちょっと床屋さんの「サインポール」っぽい感じもありますねｗ
色を変える事で、違う雰囲気で楽しむのもアリです^^
余談ですが…
サインポール 理容 理髪店 LEDポールライトヘアーサロン理容室ポーチ魅力ログイン回転照光赤白青は省エネストリップ
まさかAmazonに売ってると思いませんでしたｗｗｗ
あ、記事は↓こちらです。
【CSSサンプル】カーソルを載せると動くグラデーションバー - Little Strange Software
勝手に動いてるタイプ
カタカタ自己主張する見出し
こんな風に、ボックス要素につけた見出しがカタカタ揺れる事で自己主張します！
…が、自己主張しているわりにボックスにマウスカーソルが乗ると、赤面したようにピンク色のマーカーが入りますｗ
これはですね、多くの方に採用していただきました^^
ありがとうございます！
コード、および色などの改変方法については↓こちらから！
【CSS】カタカタ自己主張する見出し（なのに照れ屋さん） - Little Strange Software
背景多重アニメーション
これ、「アニメーションするボックス（枠）」に入れるべきかちょっと迷うところはありますが…入れておきます！
【CSS】背景多重アニメーションのテスト - Little Strange Software
→後に応用した例「聖なる夜に」もあわせてリンクはっておきます^^
鹿威し（ししおどし）のように揺れる見出し
こんな風に、ボックス要素につけた見出しが鹿威しのように揺れる事で自己主張します！
また、ボックス要素にマウスカーソルが乗っている間は動作がちょっとゆっくりになります。
はい、カタカタの二番煎じです！ｗ
ちょっと動き（速度）を凝ってみた＆色あいを竹をイメージしたものにしてみました。
なお、鹿威しって読み難いので、
<ruby>鹿威し<rt>ししおどし</rt></ruby>
↑こんなコードでルビを振ってたりします。
【CSS】鹿威し（ししおどし）のように揺れる見出し【カタカタ改変】 - Little Strange Software
２つの四角形に囲まれたボックス
動いてはいるけど、かろうじて中の文章には重なりません^^
見た目がシンプルな割に、これを実現するのに結構面倒な手間がかかりましたｗ
（赤と青の四角ですが、それぞれ上下左右の線を設定…都合８つの線で描いています）
↓記事はこちらですが、最初にアニメーションしないサンプル、その下にアニメーションするほうのサンプルがあります^^
【CSSサンプル】２つの四角形に囲まれたボックス - Little Strange Software
隠れた文字を照らし出すサーチライト
「たたっ斬る！」に似た感じもありますが、こちらは勝手に動いてるバージョン^^
動きを工夫してみました。
【CSSサンプル】隠れた文字を照らし出すサーチライト【小ネタ】 - Little Strange Software
あとがき
CSSでアニメーションを表現する方法は、ざっくり分けると「transition」と「animation」の２通りあります。
「transition」は「変化した時に、時間をかけてゆっくり変化するように間を補完する」もの、「animation」は「指定した時間経過に応じて変化させ、その間を補完する」というもの。
「勝手に変化する」のは「animation」のほうで、「transition」の方は「変化」自体を別の方法で発生させる必要があります。
変化させる方法としてCSSで実現可能なのがクリックやホバー（マウスカーソルをあわせる）などのマウス操作になるんですね。
「animation」を使用する場合、予めCSS内で「keyframes」というものを設定する事になります。
「keyfames」の参考記事は↓こちら！
また、ググるともっと詳しく解説されているサイトが見つかると思います^^
あと、今回紹介した各サンプルで色を自由に設定するようオススメしていますが、CSSの色指定について記事にしたものが↓こちらとなります。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
