@keyframesアニメーションを使ってみよう-初心者用-

  • はてブ

CSS3のanimationプロパティと@keyframesを使用すると、CSSのみでアニメーションをすることができます。
複雑なものでなければ簡単にできるので、まずは触ってみましょう。

img
今回は正方形を長方形にするアニメーションを作成します。


記述例

CSS(記述例)


HTML(記述例)



基本の形はこうなります。
まず、@keyframesの記述の後に、アニメーションに対して任意の名前を付けます。
0%は最初に表示される形、100%には最後に表示される形を記述します。

次にアニメーションさせる要素に対して、記述します。
@keyframesの記述の後に付けた、任意の名前と同じものをanimation-nameに対して記述します。
あとはanimation-durationでアニメーションのスピード設定をします。


style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">


実際にやってみよう

CSS


最初は100px、徐々に大きくなり最後には500px幅になって背景色が変わります。
アニメーションさせる要素については、今回はアニメーションが終わった後に要素が見えなくなってしまうので、一部0%と同じプロパティの指定をしています。

HTML



これで完成です。

DEMO




一見複雑そうですが、基本を押さえれば便利に使える@keyframes。
機会があったらもう少し詳しく描いてみようかと思います。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ