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 |
Play PUBG Mobile https://pubg-mobile.com.az an exciting world of high-quality mobile battle royale. Unique maps, strategies and intense combat await you in this exciting mobile version of the popular game.
Сантехник — вызов сантехника на дом в Москве и Московской области в удобное для вас время.
Каталог рейтингов хостингов https://pro-hosting.tech на любой вкус и под любые, даже самые сложные, задачи.
Greetings! I’ve been following your web site for a long time now and finally got the bravery to go ahead and give you a shout out from Atascocita Tx! Just wanted to tell you keep up the great work!
[url=https://griezmann-antoine-fr.biz]griezmann-antoine-fr.biz[/url]
play in diablo game here
griezmann antoine
The latest top football news https://futbol.com.az today. Interviews with football players, online broadcasts and match results, analytics and football forecasts, photos and videos.
Discover the fascinating world of online games with GameHub Azerbaijan https://online-game.com.az. Get the latest news, reviews and tips for your favorite games. Join our gaming community today!
Latest news and details about the NBA in Azerbaijan https://nba.com.az. Hot events, player transfers and the most interesting events. Explore the world of the NBA with us.
Top sports news https://idman-azerbaycan.com.az photos and blogs from experts and famous athletes, as well as statistics and information about matches of leading championships.
[url=https://avermox.com/]vermox pharmacy[/url]
Consistently producing high-high quality content, like sending flowers just because. Thank you for The dedication.
[url=https://acyclovirmc.com/]where can i buy zovirax in australia[/url]
[url=https://ciproo.online/]cipro cream[/url]
In this feature we look at causes of iMessage failure and offer straightforward troubleshooting tips to help you fix the messages app on your iPhone, iPad or Mac. Find out how to tell if iMessage is down, what to do if iMessage stops working on your iPhone, and what to do if iMessage is not working in your Mac. We will help you fix all your iMessage problems. If your iPhone still won’t send SMS messages after all this, your last option is to contact your mobile operator. Try calling the customer service line. If they can’t help you, you should contact Apple. After ruling everything else out, your iPhone may have some kind of hardware issue. You’ll be prompted to link your authentication app to your Twitter account by scanning a QR code.(If you don’t already have an app installed on your device, you’ll need to download one. You can use any time-based one time password (TOTP) authentication app like Google Authenticator, Authy, Duo Mobile, 1Password, etc.)
httpsmartech360.commarketing-automationemail-marketingmartech360-interview-with-dmytro-kudrenko-ceo-at-stripo
Add swipe gestures to any Android, no root Do you want your phone to understand you with a half-word? Would you like to send a text message with a voice command? Then see the review of the most popular voice to text apps on the Android operating system. To subscribe to this RSS feed, copy and paste this URL into your RSS reader. If you want to be able to dictate to your phone when there’s no internet connection available, tap Offline speech recognition. If your preferred language isn’t already installed, tap All, then download the language of your choice. Save my name, email, and website in this browser for the next time I comment. §The $10 Global Calling Card must be combined with another Tracfone Service Plan to work. International long distance service is available to select destinations only, which are subject to change at any time. Calls must originate from the US or Puerto Rico only. No international roaming allowed. Only for personal use. Calls are billed in one-minute increments. Airtime minutes will be deducted plus the cost of the International call. Rates are subject to change without prior notice. Card benefits expire after 180 days of last use or 30 days after your service is suspended, whichever occurs first.
If you like this Slot Crazy April 2023 review, why not sign up now and claim your 10 free spins and sign up bonus! New UK players will get 10 Free Spins with No Deposit Required to use on the Irish Luck slot. Playing slots online can put you at risk of being scammed if you try the wrong sites. But, as you’ll see in the Slot Crazy review, this site is licensed by the UK Gambling Commission, so you can be sure of a legitimate and fair experience while you’re playing with them as it proves they uphold the fair license standards that make the UKGC so well respected. There are lots of slots payment methods available. The selected methods on Slot Crazy include: Aristocrat in partnership with Warner Bros. will premiere the new Crazy Rich Asians slot game at this week’s Global Gaming Expo in Las Vegas. The game will launch a completely new cabinet which Aristocrat will unveil in Booth #1133 at the show.
https://chillspot1.com/user/gieganogo1986
The PartyPoker casino platform’s latest software significantly increases game graphics and speed. On top of that, its game selection features some of the most popular titles, with well-stocked slots and jackpot categories. This is another common brand in the online poker sector. Launched in 2001, it is considered one of the original poker platforms. The company has faced some challenges, especially after leaving the USA market. However, it has maintained its position among the leading poker rooms. Cafe Casino Poker offers a variety of deposit and payment options, including traditional and crypto payments. The minimum deposit at Cafe Casino Poker is $20. New sign-ups have the opportunity to claim the poker welcome bonus. Cafe Casino Poker does not charge any fees for transactions. The payout process at Cafe Casino Poker is fast and efficient, with most withdrawals processed within 24 hours. Players can expect to receive their payouts within 2-5 business days.
[url=https://abamoxicillin.com/]how to get amoxicillin online[/url]
cytoxan order – cheap generic stavudine order vastarel generic
Что нужно знать перед походом к стоматологу, советуем.
Что такое эндодонтия, эффективный уход за зубами.
Основные причины зубной боли, рекомендуем.
Мифы о стоматологии, в которые верят все, эффективные советы стоматолога.
Секреты крепких и белоснежных зубов, ознакомиться.
Как выбрать хорошего стоматолога, качественные методики стоматологии.
Как правильно чистить зубы: секреты здоровой улыбки, прочитать.
наша стоматологія [url=https://klinikasuchasnoistomatologii.vn.ua/]наша стоматологія[/url] .
https://www.multichain.com/qa/index.php?qa=user&qa_1=northdeath08
Your blog post was a real eye-opener for me. Thank you for challenging my preconceived notions and expanding my worldview.
{
Идеальные тактичные штаны для любого случая, сделанные из качественных материалов.
Тактичные штаны: модные тренды этого сезона, которые подчеркнут вашу уверенность и стиль.
Чем отличаются тактичные штаны от обычных, чтобы выглядеть стильно в любой ситуации.
Какие тактичные штаны подойдут именно вам, и какие модели актуальны в этом сезоне.
Тактичные штаны: выбор современного мужчины, чтобы чувствовать себя комфортно в любой ситуации.
купити тактичні штани [url=https://vijskovitaktichnishtanu.kiev.ua/]https://vijskovitaktichnishtanu.kiev.ua/[/url] .
Откройте путь к лучшей версии себя
– перейдите по линку на -%D0%9E%D0%BF%D1%81%D1%83%D0%B8%D0%BC%D0%BE%D0%BB%D0%BE%D0%B3.%20%D0%9A%D1%82%D0%BE%20%D1%82%D0%B0%D0%BA%D0%BE%D0%B9
[url=https://sps134.ru]https://sps134.ru[/url] вызов сантехника.
вызов сантехника [url=https://sps134.ru]https://sps134.ru[/url].
срочный вызов сантехника [url=https://sps134.ru]https://sps134.ru[/url].
сантехник вызов [url=https://sps134.ru]https://sps134.ru[/url].
[url=https://sps134.ru]https://sps134.ru[/url] сантехник на дом.
[url=https://sps134.ru]https://sps134.ru[/url] сантехнические работы.
[url=https://sps134.ru]https://sps134.ru[/url] сантехнические услуги.
сантехнические работы вызвать мастера [url=https://sps134.ru]https://sps134.ru[/url] .
мастер сантехник [url=https://sps134.ru]https://sps134.ru[/url] .
[url=https://griezmann-antoine-fr.biz]antoine griezmann[/url]
play in diablo game here
antoine griezmann
https://timeoftheworld.date/wiki/Shattered_No_More_The_Ultimate_Guide_to_Auto_Glass_Replacement
[url=http://xlyrica.com/]lyrica pills for sale[/url]
[url=https://tadacip.store/]tadacip 20[/url]
https://mozillabd.science/wiki/Clear_Vision_The_Ultimate_Guide_to_Auto_Glass_Replacement
Профессиональные seo https://seo-optimizaciya-kazan.ru услуги для максимизации онлайн-видимости вашего бизнеса. Наши эксперты проведут глубокий анализ сайта, оптимизируют контент и структуру, улучшат технические аспекты и разработают индивидуальные стратегии продвижения.