CSS - 002 - 漢堡選單動畫

002

＋ 主題 - 漢堡選單動畫animation

github連結

＋ css語法筆記 -

animation : name / duration / timing-function / delay / iteration-count / direction / animation-fill-mode;
// iteration-count - 像是infinite循環
// direction - 像是to-from, 100%-0%, reverse, alternate作用完又回頭, alternate-reverse先相反再正常
// timing-function - 像是ease-in或使用cubic-bezier
css易搞混選擇器：
.classA .classB{}  - 中間有空格：AB屬父子關係，選擇B
.classA.classB{}  - 中間沒有空格：選擇同時擁有A與B的
.classA, .classB{}  - 中間逗號：選擇有A或B的

+實作技巧 -

把動畫綁在.active身上，click之後toggle至父層，子層選擇器使用.parent.active  .child{}的原理作用動畫