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>

Windows 11安裝時跳過網路連線