animationプロパティを指定する
Usage
animation: [キーフレーム名] [アニメーション時間]
[アニメーションのイージング指定] [アニメーション開始時間]
[繰り返し回数] [アニメーション終了後プロパティをどのように保持するか]
キーフレーム一覧
・fadeout
要素が徐々に透明になって消えるアニメーション（フェードアウト）。
アニメーションのイージング指定
繰り返し回数
アニメーション終了後プロパティをどのように保持するか
@keyframes {}を指定する
0% ~ 100%の間にプロパティを指定してアニメーションを作っていく。
動画編集するときのキーフレームと同様。
中間点を細かく打っていくことで複雑なアニメーションも組むことができる。
Usage
@keyframes [keyframe-name] {
[percentage] { [property]: [field] }
}
cssアニメーション専用プロパティ
負荷/処理速度
アニメーションをたくさん使う場合は、translateやscaleのような描画コストが少ないものできるだけ指定してあげると良い。
注意
メディアクエリを使用している場合は、animationプロパティを重ねて宣言してはいけない。
javascriptを使うとうまくいかないことがある？？