今日はcssでできるアニメーションについて調べていました。
アニメーションて面白い...作ってみると絵本の中のものが突然動き出しす感じの驚きと感動が味わえます。
もうそんなこんなで2時間たってるよ！！やばいやばい。
あー時間を使いすぎてしまったと後悔😥
もっと今為になることをしてないといけないのについ遊んでしまいます...
とりあえずjavascriptとか全然まだわからないので、htmlとcssだけでできることからやっていこうということで一つ紹介します。。
ホバーするとボックスの色と大きさが変化します。
デモ↓
http://xd088649.html.xdomain.jp/animation/
色が変わって動くという本当に単純なものですが。。
(てか関係ないけどアメブロcssいじれないしそろそろやめたい笑)
htmlは
<div class="box"></div>
cssは
.box {
width: 100px;
height: 100px;
background: #000;
transition: all 300ms 0s ease; ←変化と変化するまでの時間設定
}
.box:hover {
background: #ccc;
width: 300px; ←ホバーした後に変化していくサイズ
}
このままコピペで動きます。
transitionを使うだけでもいろいろと幅を増やせば使えそうですね。中に文字いれたり、ボタンにしてみたり。。。
そのあとに
htmlとcssだけで桜の花びらを降らせるという記事をみつけてしまいました、、雪バージョンにしてやってみたい..!!
↓これ
https://liginc.co.jp/web/html-css/css/154338
アニメーションは動くまで諦めきれないので厄介ですね...
調べていくと本当にレベル高いものがたくさんあって私みたいなへっぽこからみると、うらやましいですね....
この辺とかやっぱり可愛げがあっていいなと思います。
↓ディズニー社に学ぶ、アニメーションの基本原則12個
https://cssanimation.rocks/jp/principles/
一つ一つやっていくしかないですね!
また何か簡単に作ったものご紹介できればと思います！
