SONICMOOV Googleページ

簡単な記述で手軽に使えるCSSアニメーション

簡単な記述で手軽に使えるCSSアニメーション

  • このエントリーをはてなブックマークに追加

こんにちはかめのです。

今回はCSSだけでお手軽にアニメーションを作ってみましょう。

はじめに

アニメーションを取り入れることで躍動感のあるサイトになります。
ただし、古いブラウザでは対応していないので下記のリンク先を参考にして利用するようにしてください!

参考:
http://caniuse.com/#search=transform
http://caniuse.com/#search=transition
http://caniuse.com/#search=animation

書いてみる

使うプロパティはこの3つ。

  • transition(要素の時間的変化)
  • animation(アニメーションをまとめて指定する)
  • transform(要素の変形)

それではひとつひとつ見ていきましょう。

transition – 要素の時間的変化 –

html

<div class="demo">
<div class="demo01">transition - 要素の時間的変化 -</div>
</div>

css

.demo div {
  margin: 30px auto 0;
  padding: .5em 1em;
  width: 170px;
  height: 18px;
  border: 1px #ff0099 solid;
  font-weight: bold;
  overflow: hidden;
  text-align: center;
}

div.demo01 {
  width: 60px;
  -webkit-transition-property: width;
  -webkit-transition-duration: 5s;
  transition-property: width;
  transition-duration: 1s;
  text-align: left;
}
div.demo01:hover {
  width: 190px;
}

DEMO 01 : transition

transitionでは要素にマウスをのせると、かくれていた文字が表示されました。

animation – アニメーションをまとめて指定する –

続いてanimationプロパティを見てみましょう。

html

<div class="demo">
<div class="demo02">animation - アニメーションをまとめて指定する -</div>
</div>

css

.demo div {
  margin: 30px auto 0;
  padding: .5em 1em;
  width: 170px;
  height: 18px;
  border: 1px #ff0099 solid;
  font-weight: bold;
  overflow: hidden;
  text-align: center;
}

div.demo02 {
  margin: 0;
  -webkit-animation: 5s cubic-bezier(0.19, 1, 0.22, 1) infinite alternate;
  animation: 5s cubic-bezier(0.19, 1, 0.22, 1) infinite alternate;
  -webkit-animation-name: demo02;
  animation-name: demo02;
}
@-webkit-keyframes demo02 {
  0% { -webkit-transform: translateX(120px) rotate(800deg); }
  100% { -webkit-transform: translateX(480px) rotate(1440deg); }
}

DEMO 02 : animation

animationでは要素がくるくる回転しています(今回はループに設定)。
animationはkeyframeでまとめて設定できるのが強みなプロパティです。

transform – 要素の変形 –

続いてtransformプロパティを見てみましょう。

html

<div class="demo">
<div class="demo03">transform- 要素の変形 -</div>
</div>

css

.demo div {
  margin: 30px auto 0;
  padding: .5em 1em;
  width: 170px;
  height: 18px;
  border: 1px #ff0099 solid;
  font-weight: bold;
  overflow: hidden;
  text-align: center;
}

div.demo03:hover {
  transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
}

DEMO 03 : transform

transformでは要素にマウスをのせると、要素が斜めに傾きました。

さいごに

今回はCSSだけで要素に動きをつけてみました。
ちょっとした変化をつけたいときに使えますね。

参考URL
https://blog.codecamp.jp/css_animation

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

かめの(マークアップエンジニア)

趣味は昼寝です。

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation