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

かめの

2016.05.25

フロントエンジニア

こんにちはかめのです。

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

はじめに
書いてみる
さいごに

はじめに

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

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

書いてみる

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

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

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

transition – 要素の時間的変化 –

html

[sourcecode lang="html"]
<div class="demo">
<div class="demo01">transition - 要素の時間的変化 -</div>
</div>
[/sourcecode]

[sourcecode lang="html"]

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

</div>

[/sourcecode]

css

[sourcecode lang="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;
}
[/sourcecode]

[sourcecode lang="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;

}

[/sourcecode]

DEMO 01 : transition

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

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

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

html

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

[sourcecode lang="html"]

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

</div>

[/sourcecode]

css

[sourcecode lang="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); }
}
[/sourcecode]

[sourcecode lang="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); }

}

[/sourcecode]

DEMO 02 : animation

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

transform – 要素の変形 –

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

html

[sourcecode lang="html"]
<div class="demo">
<div class="demo03">transform- 要素の変形 -</div>
</div>
[/sourcecode]

[sourcecode lang="html"]

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

</div>

[/sourcecode]

css

[sourcecode lang="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);
}
[/sourcecode]