ブログ

BLOG

【現場だより vol.1】CSSアニメーションをはじめよう!

2020.8.27

  • お知らせ

WEBサイトが作れるようになると、やはりアニメーションをつけたくなります。 私、アニメーションがすごいサイトを見ると、開発者魂に火がつきます。 vol.1はCSSアニメーションについて実践を交えて紹介したいと思います。   @keyframes @keyframes zoomUp { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } プロパティをどこからどのように変化させるのかを定義します。 0%は初期値、100%は最終値になります。 50%として値を設定することもできます。 @keyframes zoomUp { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } この場合は、中間まで拡大し、その後は縮小して初期値に戻るパターンです。 そこで、よく使われるのはマウスホバーエフェクトで、画像が拡大するパターンです。 @keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.15); } } a img { animation: zoomUp 10s linear 0s 1 normal both; }   よく見ますね!このエフェクト。 パターンは簡単なので、覚えていきましょう。 フェードインもよくあるパターンです。 @keyframes fadeIn { 0% { opacity:0; width:200px; } 100% { opacity:1; width:400px; } }   実際に組み込んで、いろんなkeyframeアニメーションを作ってみましょう。 覚えると楽しくなります。 次回、vol.2は、「TweenMaxでアニメーションをさせてみよう!」です。   参考サイト 【CSS3】@keyframes と animation 関連のまとめ https://qiita.com/7968/items/1d999354e00db53bcbd8