CSS3によるアニメーション・animation

css3

CSS3によるアニメーションは大きく分けて、トランジション（transition）とアニメーション（animation）の２つに別ける事が出来ます。

CSS3におけるトランジション（transition）とアニメーション（animation）の違い

「transition」

動かすために:hoverなどのきっかけが必要
トランジションでは実行後に元のプロパティ値に戻る
比較的簡単な記述で動かす事が可能

「animation」

transitionより細かい設定が可能
記述が複雑
「@keyframes」の記述が必要

http://caniuse.com/などのサイトでブラウザサポート状況を確認する。

animation関連プロパティ

animation-name　必須

@keyframes で定義した名前を指定します。これを指定していないとアニメーションは実行されません。

animation-duration　必須

一回分のアニメーションを実行する時間の長さを指定します。

animation-timing-function

アニメーションのタイミングや進め方を指定します。
ease（初期値）
ease-in
ease-out
ease-in-out
linear

weboook.blog22.fc2.com

animation-delay

要素が読み込まれてからアニメーションがいつ始まるかを指定します。初期値の 0 だとただちに実行されます。

animation-iteration-count　（初期値は1）

アニメーションを繰り返す回数を数字で指定します。無限ループにするには infinite を指定。

animation-direction

アニメーションを繰り返す方向を指定します。

normal … 通常の方向で再生（初期値）
alternate … 奇数回で通常・偶数回で反対方向に再生（行って帰って行って帰って…という具合）
reverse … 逆方向に再生
alternate-reverse … alternate の逆方向に再生

animation-fill-mode

アニメーションの再生前後の状態を指定します。
none（初期値）
forwards … 再生後、最後のキーフレームの状態を保持
backwards … 再生前、最初のキーフレームの状態を適用
both … forwards と backwards の両方を適用

背景色が移り変わるアニメーションとティッカー

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>css3による本格animation</title>
<style>
html,body,ul,li{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.box{
width:300px;
height:250px;
margin: 100px auto;
background:#333366;
animation:bg-color 10s infinite;
}
@keyframes bg-color{
0%{background:#333366;}
25%{background:#FC3;}
50%{background:#993366;}
75%{background:#666666;}
100%{background:#333366;}
}

.waku{
height:50px;
overflow:hidden;
}
ul{
height:150px;
animation: ticker 9s infinite linear;
}
@keyframes ticker{
0%{transform:translate(0,0);opacity:1;}
29%{transform:translate(0,0);opacity:1;}
30%{transform:translate(0,0);opacity:0;}
32%{transform:translate(0,-50px);opacity:0;}
33%{transform:translate(0,-50px);opacity:1;}
63%{transform:translate(0,-50px);opacity:1;}
64%{transform:translate(0,-50px);opacity:0;}
65%{transform:translate(0,-100px);opacity:0;}
66%{transform:translate(0,-100px);opacity:1;}
96%{transform:translate(0,-100px);opacity:1;}
97%{transform:translate(0,-100px);opacity:0;}
100%{transform:translate(0,0);opacity:0;}
}
li{
height:50px;
text-align:center;
line-height:50px;
font-size:24px;
}

</style>
</head>

<body>
<div class="box"><img src="img/bg.png" alt=""></div>

<div class="waku">
<ul>
<li>年末セール開催中</li>
<li>業界最安値に挑戦</li>
<li>数量限定で販売中</li>
</ul>
</div>
</body>
</html>

参考サイト

CSS3でアニメーション！transitionとanimationまとめ（サンプル付き）フラップイズム

CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス