Animate.CSS – 用CSS就可以做出的動態特效
Animate.CSS是一款集合了多種CSS3動態效果的CSS檔，在使用上相當方便，只要直接在需要製作特效的標籤上載入指定的CSS類別，就可以快速做出動畫效果，不過要特別注意，也因為他是CSS3的動畫效果，所以IE的部分需要使用9以上的版本才可以閱讀喔。
Animate 官網截圖
大家可以先到Animate官網下載Animate.css，下載完成後，將Animate.css載入至頁面中。
<link rel="stylesheet" type="text/css" href="animate.css">
準備完成後，可以直接對著想要做特效的標籤套上Animate的類別，類別名稱需與官網設定的名稱一樣，呈現特效的方式是在網頁載入完成後執行，下面是幾個簡單的範例。
參考Caroline製作bounceInDown效果：
<body> <div id="frog" class="animated bounceInDown" ></div> </body>
參考Caroline製作zoomIn效果：
<div id="rainbow" class="animated zoomIn"></div>
參考Caroline製作的lightSpeedIn效果：
<div id="mrt" class="animated lightSpeedIn"></div>
搭配圖片後更可以呈現特效感覺。
接下來，我們還可以在指定物件，加入Animate的CSS來控制特效的時間，設定該物件特效的時間長短，例如彩虹，我們就可以讓它慢慢出現。
參考Caroline製作範例網頁：設定該物件特效過程的時間
<style>
*{ margin:0px; padding:px; border:none}
#rainbow{
width:500px;
height:164px;
background-image:url(images/rainbow.png);
-webkit-animation-duration: 3.5s;/*設定該物件特效過程的時間，3.5s代表3.5秒。*/
}
</style>
<div id="rainbow" class="animated zoomIn"></div>
參考Caroline製作範例網頁：設定該物件特效延遲多久出現，我們可以結合前面做的，效果更明顯。
<style>
#mrt{
width:152px;
height:62px;
background-image:url(images/mrt.png);
position:relative;
bottom:100px;
margin:auto;
-webkit-animation-delay: 3.5s;/*指定該物件特效延遲開始，3.5s代表3.5秒。*/
}
</style>
<div id="mrt" class="animated lightSpeedIn"></div>
參考Caroline製作範例網頁：設定該物件特效次數。
<style>
#star{
width:46px;
height:45px;
background-image:url(images/star1.png);
-webkit-animation-iteration-count: infinite;/*設定該特效次數，infinite代表無限。*/
}
</style>
<div id="star" class="animated flash"></div>
懂得運用特效及時間的搭配後，就可以發揮你們的創意，做出喜歡的效果。
參考Caroline製作範例頁面：
物件很多，所以程式碼有點多，但其實都是很單純的CSS。
<style>
*{ padding:0px; margin:0px}
body{ background-color: #999;}
.clearLeft{ clear:left}
.floatLeft{ float: left}
#box{ width:1300px; height:800px; overflow:hidden; margin:auto; padding-top:30px;}
#cloud1{ width:130px; height:100px; background-image:url(images/cloud1.png); position:relative; left:-230px;-webkit-animation-duration: 20s;-webkit-animation-iteration-count: infinite;}/*設定雲朵特效過程長20秒，特效次數無限。*/
#cloud2{width:78px; height:63px; background-image:url(images/cloud2.png); position:relative; top:100px; right:-1300px;-webkit-animation-duration: 25s;-webkit-animation-iteration-count: infinite;}/*設定雲朵特效過程長25秒，特效次數無限*/
#cloud3{ width:130px; height:100px; background-image:url(images/cloud1.png); position:relative; top:200px; left:-330px;-webkit-animation-duration: 20s;-webkit-animation-iteration-count: infinite;-webkit-animation-delay: 2s;}/*設定雲朵特效過程長20秒，特效次數無限，且在頁面載入2秒後做特效*/
#star1{ width:45px; height:45px; background-image:url(images/star1.png);position:relative; left:50px;-webkit-animation-iteration-count: infinite;-webkit-animation-delay: 2s}/*設定星星特效次數無限，且在頁面載入2秒後做特效*/
#star2{ width:23px; height:23px; background-image:url(images/star2.png);position:relative; left:230px; top:80px;-webkit-animation-iteration-count: infinite;-webkit-animation-delay: 0.3s}/*設定星星特效次數無限，且在頁面載入0.3秒後做特效*/
#star3{ width:22px; height:22px; background-image:url(images/star3.png);position:relative; left:400px;-webkit-animation-iteration-count: infinite;-webkit-animation-delay: 0.5s }/*設定星星特效次數無限，且在頁面載入0.5秒後做特效*/
#star4{ width:41px; height:41px; background-image:url(images/star4.png);position:relative; left:580px ;top:100px; -webkit-animation-iteration-count: infinite;-webkit-animation-delay: 0.8s}/*設定星星特效次數無限，且在頁面載入0.8秒後做特效*/
#star5{ width:22px; height:23px; background-image:url(images/star5.png);position:relative; left:750px;top:50px; -webkit-animation-iteration-count: infinite;}/*設定星星特效次數無限*/
#panda{ width:166px; height:175px; background-image:url(images/panda2.png); position:relative; top:350px;-webkit-animation-delay: 3.0s}/*設定熊貓在頁面載入3.8秒後做特效*/
#frog{ width:159px; height:184px; background-image:url(images/frog2.png); position:relative; top:250px;-webkit-animation-delay: 4.1s}/*設定青蛙在頁面載入4.1秒後做特效*/
#taipei{ width:252px; height:442px; background-image:url(images/101.png);-webkit-animation-delay:4.9s;}/*設定101在頁面載入4.9秒後做特效*/
#ferriBox{ width:200px; height:270px; position:relative; top:5px; left:20px;-webkit-animation-delay:3.8s;}/*設定摩天輪在頁面載入3.8秒後做特效*/
#wheel{ width:199px; height:202px; background-image:url(images/wheel.png); position:relative; top:102px;left:-50px;}
#ferri{ width:82px; height:178px; background-image:url(images/ferri.png);}
#houseBox{-webkit-animation-delay:5s;}/*設定房子在頁面載入5秒後做特效*/
#heart1{ width:25px; height:23px; background-image:url(images/love1.png);margin-left:110px; margin-bottom:10px;-webkit-animation-delay:5.3s; }/*設定愛心在頁面載入5.3秒後做特效*/
#heart2{ width:33px; height:28px; background-image:url(images/love2.png);margin-left:80px; margin-bottom:20px;-webkit-animation-delay:5.9s;}/*設定愛心在頁面載入5.9秒後做特效*/
#heart3{ width:41px; height:41px; background-image:url(images/love3.png);margin-left:140px; -webkit-animation-delay:6.4s;}/*設定愛心在頁面載入6.4秒後做特效*/
#heart4{ width:60px; height:50px; background-image:url(images/love4.png);margin-left:70px; margin-bottom:10px;-webkit-animation-delay:7.0s;}/*設定愛心在頁面載入7.0秒後做特效*/
#heart5{ width:86px; height:84px; background-image:url(images/love5.png);margin-left:160px; margin-bottom:10px;-webkit-animation-delay:7.6s;}/*設定愛心在頁面載入7.6秒後做特效*/
#house{ width:116px; height:145px; background-image:url(images/house.png);margin-bottom:10px;}
#hello{ margin-top:25px; margin-left:8px;-webkit-animation-iteration-count: infinite;-webkit-animation-duration: 1.5s;}/*設定Hello特效次數無限，並且在頁面載入1.5秒後做特效*/
#bear{ width:187px; height:197px; background-image:url(images/bear.png); position:relative; top:340px;left:-160px;-webkit-animation-delay:4.4s}/*設定黑熊在頁面載入4.4秒後做特效*/
#balloonBox{-webkit-animation-delay:4.4s; position:relative}/*設定氣球在頁面載入4.4秒後做特效*/
#balloon{ width:78px; height:125px; background-image: url(images/balloon.png);position:relative; top:320px; left:-70px;-webkit-animation-delay:8.3s;-webkit-animation-duration: 20s; }/*設定氣球在頁面載入8.3秒後做特效，特效過程20秒*/
#rainbow{ width:1152px; height:378px; background-image:url(images/rainbowB.png); position:relative; bottom:100px;-webkit-animation-duration: 3.5s; }/*彩虹，設定特效過程3.5秒*/
</style>
<body> <div id="box"> <div id="cloud1" class=" animated fadeInRightBig floatLeft"></div><!-- 使用fadeInRightBig是會從視窗外由右向左飛進來的效果--> <div id="cloud2"class=" animated fadeInLeftBig floatLeft"></div> <div id="cloud3" class=" animated fadeInRightBig floatLeft"></div> <div id="star1"class=" animated flash clearLeft floatLeft"></div> <div id="star2"class=" animated flash floatLeft"></div><!--flash 閃爍效果，可以運用在星星或閃光燈...上面--> <div id="star3"class=" animated flash floatLeft"></div> <div id="star4"class=" animated flash floatLeft"></div> <div id="star5"class=" animated flash floatLeft"></div> <div id="panda"class=" animated bounceInUp clearLeft floatLeft"></div><!--bounceInUp 熊貓彈上來的效果--> <div id="frog"class=" animated bounceInDown floatLeft"></div><!--bounceInDown 青蛙跳下來的效果--> <div id="taipei"class=" animated fadeIn floatLeft"></div><!--fadeIn 101淡入效果--> <div id="ferriBox"class=" animated bounceIn floatLeft"><!--bounceIn 摩天輪彈進來的效果--> <div id="wheel" ></div> <div id="ferri"class=""></div> </div> <div id="houseBox"class=" animated zoomIn floatLeft"><!-- zoomIn 房子與愛心還有愛心上的字同時從遠到進的效果 --> <div id="heart5" class="animated fadeIn"><img class="animated tada" id="hello" src="images/hello.png" width="50" height="49"><!-- tada 設定Hello晃動的效果 --></div> <div id="heart4"class="animated fadeIn"></div><!-- fadeIn 設定愛心淡入的效果 --> <div id="heart3"class="animated fadeIn"></div> <div id="heart2"class="animated fadeIn"></div> <div id="heart1"class="animated fadeIn"></div> <div id="house"></div> </div> <!-- 為了讓氣球跟熊可以一起出現，最後氣球還可以飛到天上，所以用多個DIV包住，設定不同特效及時間。--> <div id="balloonBox" class="animated bounceInRight floatLeft"><!--bounceInRight 氣球由右往左彈入效果--> <div id="balloon"class=" animated fadeOutUpBig floatLeft"></div><!--fadeOutUpBig 氣球往上飛效果--> </div> <div id="bear" class="animated bounceInRight floatLeft"></div><!--bounceInRight 黑熊由右往左彈入效果--> <div id="rainbow" class="animated zoomIn clearLeft"></div><!--zoomIn 彩虹由遠到近的效果--> </div> </body>
最後，下面是幫大家整理出所有Animate的類別。
| bounce | bounceIn | bounceOutRight | fadeInRightBig |
| flash | bounceInDown | bounceOutUp | fadeInUp |
| pulse | bounceInLeft | fadeIn | fadeInUpBig |
| rubberBand | bounceInRight | fadeInDown | fadeOut |
| shake | bounceInUp | fadeInDownBig | fadeOutDown |
| swing | bounceOut | fadeInLeft | fadeOutDownBig |
| tada | bounceOutDown | fadeInLeftBig | fadeOutLeft |
| wobble | bounceOutLeft | fadeInRight | fadeOutLeftBig |
| flipInX | rotateIn | fadeOutUp | fadeOutUpBig |
| flipInY | rotateInDownLeft | rotateOutDownLeft | rollIn |
| flipOutX | rotateInDownRight | rotateOutDownRight | rollOut |
| flipOutY | rotateInUpLeft | rotateOutUpLeft | zoomIn |
| lightSpeedIn | rotateInUpRight | rotateOutUpRight | zoomInDown |
| lightSpeedOut | rotateOut | hinge | zoomInLeft |
| slideInDown | slideOutDown | zoomOutDown | zoomInRight |
| slideInLeft | slideOutLeft | zoomOutLeft | zoomInUp |
| slideInRight | slideOutRight | zoomOutRight | zoomOut |
| slideInUp | slideOutUp | zoomOutUp |
[u][b] Привет, друзья![/b][/u]
[b]Приобрести диплом о высшем образовании.[/b]
[url=http://livestockkenya.com/index.php/cb-profile/pluginclass/cbblogs?action=blogs&func=show&id=244/]livestockkenya.com/index.php/cb-profile/pluginclass/cbblogs?action=blogs&func=show&id=244[/url]
Thibaut Courtois https://real-madrid.thibaut-courtois-ar.com was born on May 11, 1992 in Belgium.
[u][b] Здравствуйте![/b][/u]
[b]Заказать документ[/b] о получении высшего образования вы можете в нашем сервисе.
[url=http://asxdiplomik.com/kupit-diplom-sankt-peterburg/]asxdiplomik.com/kupit-diplom-sankt-peterburg[/url]
[b]Успешной учебы![/b]
https://doxycyclinedelivery.pro/# doxycycline online cheap
Arsenal https://arsenal.mesut-ozil-ar.com made a high-profile signing in 2013, signing star midfielder Mesut Ozil from Real Madrid.
In an era when many young footballers struggle to find their place at elite clubs, Javi’s https://barcelona.gavi-ar.com story at Barcelona stands out as an exceptional one.
Rodrigo Goes https://real-madrid.rodrygo-ar.com better known as Rodrigo, is one of the brightest young talents in modern football.
The Saudi Football League https://saudi-arabian-championship.saudi-pro-league-ar.com known as the Saudi Professional League, is one of the most competitive and dynamic leagues in the world.
https://euroavia24.com – Cheap flights, hotels and transfers around the world!
[u][b] Привет, друзья![/b][/u]
[b]Всё, что нужно знать о покупке аттестата о среднем образовании без рисков[/b]
[url=http://shockmusik.ru/legkiy-i-byistryiy-sposob-poluchit-diplom/]shockmusik.ru/legkiy-i-byistryiy-sposob-poluchit-diplom[/url]
http://ciprodelivery.pro/# purchase cipro
amoxicillin buy canada [url=https://amoxildelivery.pro/#]where to buy amoxicillin 500mg[/url] amoxicillin 500 mg
[u][b] Добрый день![/b][/u]
[b]Официальная покупка аттестата о среднем образовании в Москве и других городах [/b]
[url=http://oren.kabb.ru/viewtopic.php?f=19&t=33200&p=50454#p50454/]oren.kabb.ru/viewtopic.php?f=19&t=33200&p=50454#p50454[/url]
[u][b] Рады помочь![u][b].
[u][b] Привет, друзья![/b][/u]
[b]Мы изготавливаем дипломы[/b] психологов, юристов, экономистов и любых других профессий по выгодным тарифам.
[url=http://br-totalbyg.dk/2024/06/24/диплом-в-три-клика//]br-totalbyg.dk/2024/06/24/диплом-в-три-клика/[/url]
In recent years, the leading positions in the Spanish https://spanish-championship.laliga-ar.com championship have been firmly occupied by two major giants – Barcelona and Real Madrid.
In the German football https://german-championship.bundesliga-football-ar.com championship known as the Bundesliga, rivalries between clubs have always been intense.
The Italian football championship https://italian-championship.serie-a-ar.com known as Serie A, has seen an impressive revival in recent years.
The road to the Premier League https://english-championship.premier-league-ar.com begins long before a team gets promoted to the English Premier League for the first time
paxlovid price: buy paxlovid online – paxlovid india
[url=https://strattera.company/]strattera medication coupon[/url]
The golf https://arabic.golfclub-ar.com industry in the Arab world is growing rapidly, attracting players from all over the world.
[u][b] Привет![/b][/u]
[b]Мы можем предложить документы техникумов[/b], которые расположены на территории всей России. Вы имеете возможность купить качественный диплом за любой год, включая сюда документы старого образца СССР. Дипломы и аттестаты делаются на “правильной” бумаге высшего качества. Это дает возможности делать настоящие дипломы, не отличимые от оригинала. Они будут заверены всеми необходимыми печатями и штампами.
[url=http://i2od836bz.blog5star.com/28636031/%D0%9A%D0%B0%D0%BA-%D0%B2%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE-%D0%BD%D0%B5%D0%B4%D0%BE%D1%80%D0%BE%D0%B3%D0%BE-%D0%B7%D0%B0%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D1%8C-%D0%B4%D0%B8%D0%BF%D0%BB%D0%BE%D0%BC-%D0%B2-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B5/]i2od836bz.blog5star.com/28636031/%D0%9A%D0%B0%D0%BA-%D0%B2%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE-%D0%BD%D0%B5%D0%B4%D0%BE%D1%80%D0%BE%D0%B3%D0%BE-%D0%B7%D0%B0%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D1%8C-%D0%B4%D0%B8%D0%BF%D0%BB%D0%BE%D0%BC-%D0%B2-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B5[/url]
http://amoxildelivery.pro/# buy amoxicillin online without prescription
buy generic clomid no prescription [url=http://clomiddelivery.pro/#]where to buy clomid no prescription[/url] where can i buy cheap clomid without prescription
doxycycline prices: buy online doxycycline without prescription – doxycycline online canada
http://doxycyclinedelivery.pro/# doxycycline otc drug
[u][b] Привет![/b][/u]
[b]Мы готовы предложить дипломы[/b] психологов, юристов, экономистов и других профессий по разумным тарифам.
[url=http://andreandrose.co.uk/2024/07/14/купить-настоящий-диплом-вуза//]andreandrose.co.uk/2024/07/14/купить-настоящий-диплом-вуза/[/url]
[u][b] Добрый день![/b][/u]
[b]Быстрое обучение и получение диплома магистра – возможно ли это? [/b]
[url=http://www.altasugar.it/new/index.php?option=com_kunena&view=topic&catid=3&id=121991&Itemid=151/]www.altasugar.it/new/index.php?option=com_kunena&view=topic&catid=3&id=121991&Itemid=151[/url]
Рады помочь!
Dewais is an AWS cloud application development services company that helps businesses succeed. Thanks to our extensive experience, we offer you maximum benefits with optimal use of resources. The whole concept of cloud computing is no longer limited to share infrastructure to host applications. The notion of mobile application development also has taken a step forward to offer improved services to the users. The improved robustness and scalability of cloud computing helped in developing its usage. Before discussing AWS mobile app, we should understand what AWS is and why different companies adopt it to offer an agile development culture. AWS is a full-suite platform developed to aid web and mobile developers in building full-stack and scalable applications operated by AWS.
https://topazdirectory.com/listings12748196/average-cost-of-android-app-development
Computer science certification is for, well, anyone who wants one. Some students earn a college degree in computer science and then choose to build on their credentials with a certification. Other certification seekers may be working in a job that increasingly requires more technological acumen, so they seek courses in the subject and then earn the certification as evidence of their skill set. These credentials can be very useful in landing a job. After your Computer Networking program, you’ll be eligible for entry-level employment. There are many types of careers out there depending on your interests. Some career examples include: Even if a Coursera certificate is not accredited, you may still be able to use it to impress your current or future employer. But it’s important to check with your employer first to see if they would be open to recognizing a Coursera certificate.
[u][b] Здравствуйте![/b][/u]
[b]Купить диплом о высшем образовании.[/b]
[url=http://elviraobol.ru/cb-profile/pluginclass/cbblogs?action=blogs&func=show&id=569/]elviraobol.ru/cb-profile/pluginclass/cbblogs?action=blogs&func=show&id=569[/url]
When you’re looking for a fantastic new hairstyle for your curly hair, why not try some different braid options to give it an extra special touch? Stylish cornrows, French, goddess, and lemonade braids — the list of braids for curly hair goes on and on. Pick a style that suits your hair texture, and you’ll look great at your next big event! For this hairstyle, you have to start braiding from your neck hair towards the top. Create a curly updo and accessorize it with some hair jewelry. Are you craving to learn some of the top techniques when it comes to styling braided curls hairstyle? We have some of the most versatile curly hair styling skills that are guaranteed to give you the best results. There are many ways you can rock the braids, you can use the protective style or choose to set the hair or settle for the different braided curly hairstyles.
http://w4000ww.sangjinarp.com/bbs/board.php?bo_table=free&wr_id=114518
Drench in our creamy butter Brulee whole milk soap. Followed by pumpkin body polish. Super charged with organic pumpkin spice mud mask with a clean tingling feels. Finish your treatment with paraffi a new Shea butter. Located in a beautiful corner in Philadelphia, Pennsylvania, zip code 19103, Prestige Nail Salon is proud to deliver the highest quality treatments to our customers. Nails of America in Woodlands, TX 77382 was born with a love for nail art. Wishing to the mission to every nail obsessives, we’re committed with the following 3 Ps: WeChat us for appointments Some nearby Nail Salons charge a la carte, while others charge for an all-inclusive package. Make sure to understand exactly what you are getting for your money. Brown Sugar Nail Spa lives up to its name and only uses Brown Sugar for their scrub. The famous brown sugar is a well-known excellent skin exfoliator. It is proven safe since it has no other chemicals added to it. Its scrub has a secret recipe with carefully selected ingredients. Additionally, it is made by the nail technicians on their own with dedication. This scrub can be availed for every nail service without an added charge. While waiting for the nail to be glittered and pampered, the customers can enjoy a complimentary beverage.
Hello there, simply was alert to your blog thru Google, and found that it’s truly informative. I am gonna watch out for brussels. I?ll be grateful in case you continue this in future. Lots of folks can be benefited out of your writing. Cheers!