這是我在製作本網站navbar時，所運用到的css技巧。利用transition這項元素，可以完成很多簡單的動畫。

#步驟

1. 產生一個 div 元素 (此範例class name為 navbar)，在CSS給予 position:fixed 的元素，以其來製作動畫。
2. 利用jquery的 .scroll() Browser Events，於一定條件之下對navbar增減class (此範例增減的class name為 color-change)。
3. 利用 transition 即可以對 background-color height 做出圓滑動畫。

#Transiton 介紹

CSS Syntax

transition: [property] [duration] [timing-function] [delay];
default: all 0s ease 0s;

• property(屬性): 指定要套用上動畫的css元素。
• duration(動畫持續時間): 指動畫會持續幾秒鐘，0為default value。
• timing-function(變換函式):動畫的形式，這裡可以瞭解更多transition-timing-function。
• delay(延遲時間): 可以控制動畫多久之後才開始。

See the Pen navbar scroll animation by lichin-lin (@lichin-lin) on CodePen.

#參考

1. css-trick transition
2. jquery .scroll()
3. 30+ Scroll animation

Published

Tags

• CSS 5
• Animation 3