CSS勉強 - xavolog

普段プライベートなノートに毎日のKPTを記録しているんですが、人に向けて書いている（という体）でまとめた方が身につくのでここに書こうかと思います。今現在取り組んでいる作業は以下：

ここのチュートリアルをやっている。HTMLを終えて、今CSSのページ。

これは全然最終的なデザインではないです。チュートリアルの成果物をアレンジしてみただけ。個人的に関心のあるポイント

Googleがオンラインで公開しているフォントをリンクで埋め込める!*1
1. 気に入ったフォントのページに飛ぶ
2. 「Select This Font」か「Select This Style」（太さのバリエーションがある場合）をクリック
3. リンク用のコードが表示されるのでhtmlとcssファイルにコピーする
4. 簡単！便利！
header / main / footer など初期スタイル等はないが構造化に役立ちCSSのフックとして使えるタグがいろいろある
- 上の例ではheaderの背景を黒くしてnavを枠で囲ったりフォントを変えたりしている
特定の要素の前後に任意のコンテンツを埋め込める
- 擬似要素（Pseudo-element）の ::before と ::after を使う
- 上の例ではem（強調）の前後に半角スペースを埋め込んだりリンクの前に▶︎を挿入している
グラデーションはimageと同じ扱い

スタイルシートでアニメーションをつける方法はあるんだろうか。まあJavascriptでできるからCSSでやる必要はないが。