CSS3のキーフレームでつくるアニメーション

#WEB#webサイト#CSS#Animation#programming

Last update : 2025.3.10

Posted : 2015.7.30

サイトにアニメーションをつかうことによって、表現をよりリッチにすることができます。今回は、CSS3から使用できるようになったキーフレームをつかったアニメーションについて、ご紹介します。

@keyframesって何？

@keyframesとは

対応ブラウザ

プロパティ一覧

実演

文字だけでは分かりにくいですよね。
それでは実際に実演していくと同時に、どうやってアニメーションを発生させるかを
みていきましょう。

.move_testはいままで説明したものをショートハンドでまとめたものです。
@keyframesの部分で動かしたい要素に0%(スタート)から100%(アニメーション終了)までの間で
CSSを指定してあげます。

.move_test{
animation: test 4s ease-in-out 2s infinite normal both;
-webkit-aanimation: test 4s ease-in-out 2s infinite normal both;
}
@keyframes test {
0% {transform: translateX(-150%); opacity: 0;}
30%{transform: translateX(4%); opacity: 1;}
70%{transform: translateX(4%); color: red; opacity: 1;}
100% {transform: translateX(500%); opacity: 0;}
}
@-webkit-keyframes test {
0% {-webkit-transform: translateX(-150%); opacity: 0;}
30%{-webkit-transform: translateX(4%); opacity: 1;}
70%{-webkit-transform: translateX(4%); color: red; opacity: 1;}
100% {-webkit-transform: translateX(500%); opacity: 0;}
}

Animation

まとめ

いかがでしたか？
今までJavaScriptやFlashでつくらなればいけなかったアニメーションをCSSで簡単に表現し、工夫次第で、CSSだけでもユーザーの目をひく質の高いインタラクションを実現することができます。
IE10以降やGoogle Chrome、Firefox最新版などのモダンブラウザと呼ばれるものであれば、遠慮なくつかえるので、ぜひ試してみてください。

RECENT POSTS