はじめに
こんにちは！最近週末は温泉に通っている@70days_jsです！
今日はCSS Animationを使ってサイトを作りました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は26日目。(2019/11/13)
よろしくお願いします。
サイトURL
やったこと
CSS Animationを使ってサイトを作りました。
まずはgifをどうぞ↓
昨日に引き続き、またテント泊を使ってしまいました。（もちろんフレキシブルです）
さて、CSS Animationは、@keyframesと、3種類のプロパティ（animation、transition、transform）を使うことで実現できます。プロパティの特性をざっと見てみましょう。
- animation・・・アニメ的な動き（片道運動）
- transition・・・animationの下位互換（往復運動、だからhoverとかと合わせるとよく見える)
- transform・・・変形（移動・回転・拡大）
イメージこんな感じですが、いまいち本質が掴めていないのでとりあえず暫定的に捉えています。W3Cはどういう意図を持って3つのプロパティを用意したのでしょうか・・・。
ちなみにtransformプロパティはすでに昨日のテキスト on 画像で、position: absoluteのテキストを中央配置するために使っています。これ↓
transform: translateY(-50%) translateX(-50%);
では次に実装を紹介していきます。
基本的に、@keyframesでアニメーションの流れを記述して、3つのプロパティで要素や実行時間を指定します。（今回使ったのはanimationプロパティです）
例えばgifに載せたものですと、一番最初に白い四角が出てきて画面が4分割されるところの@keyframesはこうです↓
@keyframes test {
0% {
background-color: black;
width: 10px;
height: 10px;
}
50% {
background-color: rgba(255, 255, 255, .8);
width: 50vw;
height: 20vh;
}
100% {
background-color: rgba(255, 255, 255, 1);
width: 50vw;
height: 50vh;
}
}
@keyframesの後に自分でアニメーション名をつけられます。今回はtestとしました。
その中に0%~100%時のアニメーション動作を定義できます。
要素を指定してアニメーションを適用する方法も簡単です。↓
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
<div class="test6">
<img class="background_image" src="day24_image/photo4.jpg" alt="テントの画像">
<h2 class="text_on_image">テント泊</h2>
</div>
例えばclass="test"にアニメーションtest（ややこしくてすみません）を適用したい場合こう書きます↓
.test {
position: absolute;
bottom: 0;
right: 0;
animation-name: test;
animation-duration: 5s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
}
animation-name: test;
このプロパティが、名前testの@keyframesを使うということを表しています。
durationはアニメーションの時間です。0%~100%までの時間をここで記述します。
delayはアニメーションを遅らせることができます。上の書き方だと1.5秒遅れて動き出します。
最後に重要なのが、animation-fill-mode: forwards;ですが、これはアニメーションが終わった後に@keyframesで定義した100%の状態のままにしておくということを表しています。これがなければアニメーション以前の状態に戻ってしまいます。
今回のものは大体これの繰り返しで作りました。もし興味があればサイトからgithubを辿りソースコードをご覧ください。
感想
アニメーションは使っていてとても楽しかったです。cssは色々なことができるイメージがありますが、中でもアニメーションの貢献がかなり大きいんじゃないかなと思いました。
JavaScriptと組み合わせるとほぼなんでもできる気がします。
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。
参考
- マウスhover時のCSS3 transitionとanimationの違い | q-Az (https://q-az.net/mouse-hover-transition-or-animation/)
- 【CSS3】@keyframes と animation 関連のまとめ - Qiita (https://qiita.com/7968/items/1d999354e00db53bcbd8)
とても勉強になりました。ありがとうございます！