[CSS3] How to make marquee by CSS3 animation

  這次要來探討如何使用 CSS3的 animation達成跑馬燈效果, 原因是原本的 HTML的 marquee標籤是非標準標籤 (refer from wiki), W3C也不建議使用囉. 所以乾脆自己用 CSS3的動畫效果刻一個.分享出來給大家玩看看.

  主要規格是當我  focus到一個連結後底下的字樣會進行跑馬燈的效果.使用到 CSS3的 animation跟 keyframe來呈現.當然有設定文字呈現最基本的 white-space以及overflow: hidden (這樣才有跑馬燈效果阿) .

Check out this Pen!

  透過 keyframes可以設定在動畫的秒數內文字的位置來做到跑馬燈效果, 算是很彈性的作法!