［CSS3］トランジション / アニメーション / トランスフォーム

［CSS3］

　トランジション / アニメーション / トランスフォーム

　　トランジション（transition）

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

　　アニメーション（animation）

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

　　トランスフォーム（transform）

• rotateを使って線を動かす
  { transform: rotate(〇〇deg); }

［作成例］

　トランジション その１

　トランジション その２

［作成例 その２］

　ハンバーガーメニュー