ブログ

【現場だより 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

上庄電気工事様　会社プロモーションムービー撮影

更新日：2022.10.18

公開日：2020.8.21

連日、暑い日が続いています。 そんな中で先日、リクルートサイト用の動画撮影に同行しました。 新社屋の建設にあたり、サイトリニューアルとリクルート用サイトの制作をご依頼いただいている上庄電気工事株式会社様にお邪魔してきました。   当日はとても暑い中、社長様を始め沢山のスタッフにご協力をいただき、丸一日かけて撮影しました。 最近は動画制作をされたいお客様が増えています。 動画はダイレクトな伝わりやすさが魅力です。 見る・聞くの素早さに対する需要は年々高くなっていくのかもしれません。 動画やサイトを見て「一緒に働きたい！」と思える方が増えてくることを願って、これから公開に向けて作業を進めていきます。 【追記】 完成した動画はこちらから見れます。 制作事例-上庄電気工事様