▼

animate.css：一個有數十種特效動畫的CSS3文件

在學習css3的過程中，看到有一個animate.css的說明，有數十種特效動畫可以引用，
所以就下載來試用，果然使用上非常的方便，也可以藉此學習css3的語法。

下載網址有兩個位置，其中一個可以線上觀看特效如下：
http://daneden.github.io/animate.css/

選擇想要的特效，按下旁邊的按鈕就可以由標題知道效果。


這個網址也可以下載，還有英文的使用說明：
https://github.com/daneden/animate.css

使用上先由上面的網址取得animate.css檔案，再於HTML網頁內定義，例：
<head>
    <link href="animate.css" rel="stylesheet">
</head>

下面是fadeInDown與lightSpeedIn特效的使用範例：
<P class="animated fadeInDown">This is TESTING.</P>
<P class="animated lightSpeedIn">This is TESTING.</P>

完整的測試原始碼如下：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS TEST</title>
<link href="animate.css" rel="stylesheet">
</head>
<body>
   <section>
   <P class="animated fadeInDown">This is TESTING.</P>
<P class="animated lightSpeedIn">This is TESTING.</P>
</section>
</body>
</html>

於