自己紹介
名前：小林芳樹
@ykyk1218 
エンジニアブログによく登場します。
http://tech.basicinc.jp
Qiita
http://qiita.com/ykyk1218
今日はCSS3のアニメーションとかその辺のお話をします。
つくったやつ
https://s3-ap-northeast-1.amazonaws.com/awsyk/lt_allabout/prologue.html
解説
プロローグ
最初のロゴ
text-shadowを使う
ロゴを小さくするアニメーション
@keyframes logo {
0% { transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { transform: scale(0.1); opacity: 0; }
}
文字の奥行きを出す
transform: perspective(300px);
perspectiveが0だと真っ平（通常の状態）
値を大きくするごとに奥行きが深くなる
歩いてるところ
山っぽいやつ 
background: linear-gradientで要素の指定した箇所に色をつける
余計なところをtransparentで透明にする。
background: linear-gradient(<開始位置と角度> <開始色> <途中色> <終了色>)
background:linear-gradient(
45deg,
red,
red 50%,
transparent 50%,
transparent 100%);
Point:1 
疑似要素でアニメーション
要素の方にアニメーションさせたいプロパティを指定して、それを継承（inherit）する
.mountain {
top: 305px;
right: 1px;
}
.mountain::before {
content: "";
display: block;
position: absolute;
top: inherit;
right: inherit;
びっくりするところ
背景の斜線
background: linear-gradientで斜めにグラデーションをかけるようにする
1px分だけ残して他をtransparentで透明に
background: linear-gradient(to right bottom, transparent 49%, #333 50%, transparent 51%);
background-size: 30px;
バチバチするところ
視線をあわせた火花のところ 
四角の要素をいくつか作って、回転をさせて重ねる
.star {
width: 3em;
height: 3em;
background: #ef8905;
transform: rotate(22.5deg);
}
<div class="wrap-starburst">
<div class="starburst">
<div class="star"><div class="star"><div class="star"><div class="star">
</div></div></div></div>
</div>
</div>
Point2: widthをアニメーション
要素の幅をアニメーションさせていくとき、
positionをleftで指定すると左から右に大きくなっていく
positionをrightで指定すると右から左に大きくなっていく
かめはめ波っぽいものをうつところ
アニメーションを遅らせる
animation: <名前> <アニメーションの秒数> <アニメーションタイプ> <アニメーションが発動するタイミング> <アニメーションの繰り返し回数>
animation: hadoken-animation 0.1s ease 3s infinite;
今回は下記の3つを時間をずらして指定してある
- 拡大するアニメーション
- 構えるアニメーション
- 撃つアニメーション
Point3: 最初に表示させたくない要素はopacity: 0で隠す
アニメーションを遅らせて実行する場合でも、html上には最初から要素はないとだめです。
そこで最初は非表示にしておきたい要素にはopacity: 0を指定して、アニメーション実行時にopacity: 1にして表示させます。
ばらばらの状態から戻る
アニメーションの途中の状態を指定
@keyframes head-animation {
0% {top: 55px; left: 20px;}
10% {top: 55px; left: 20px;}
15% {top: 55px; left: 20px;}
25% {top: 50px; left: 15px;}
30% {top: 50px; left: 15px;}
40% {top: 0px; left: 0px;}
100% {top:0; left: 0;}
}
本当はtop、leftより要素を動かすアニメーションはtranslateを使ったほうがスムーズ
（translateはGPUを使ってアニメーションさせる）