[CSS] 三十個有趣的CSS特效

fb看人分享的，覺得裡面有很多選單特效就先記錄一下啦:D

http://www.hongkiat.com/blog/creative-css-animations/

[CSS 3] 描繪路徑

http://codepen.io/paintbycode/pen/JDbcF/
下拉Iron Man範例

如果要用Stroke效果來描述的話，需要計算path的數值。

以下記錄一下計算的方法

純JS

var path = document.querySelector('path');

var length = path.getTotalLength();

jQuery的方法

var path = $('#目的元素').get(0);

var pathLen = path.getTotalLength();

[CSS] 使用css transition 做出underline的效果

作者示範了各種underline的動畫效果，有需要的朋友可以參考一下。
我的案例需要下圖中記錄的SlideIn效果。

http://bradsknutson.com/blog/css-sliding-underline/

[CSS 3動畫] animation 語法動畫筆記

最近一些case需要使用大量的css動畫，把一些處理到的指令筆記一下

animation的短指令

animation: name duration timing-function delay iteration-count direction;

定義動畫結束後如何停止最後一個狀態

animation-fill-mode : none | forwards | backwards | both;


none：不改变默认行为。

forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both：向前和向后填充模式都被应用。

[CSS3] CSS transform/transition/animation 初學筆記

最近幫朋友弄了一個網站，需要使用很多CSS transition與animation的效果，
順道找了一些不錯的資訊學習，看完就可以馬上上手許多:D，很適合初學者們

短語法

可用屬性

參考如下：

https://www.openfoundry.org/tw/tech-column/9233-css3-animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
http://blog.iwege.com/posts/the-different-between-transform-transition-animation.html

超強transform解說：
https://desandro.github.io/3dtransforms/