
【現場だより vol.1】CSSアニメーションをはじめよう!
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