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 |
риобет казино риобет казино
Follow Bernardo Silva’s impressive career https://manchester-city.bernardosilva.net from his debut at Monaco to to his status as a key player and leader of Manchester City.
From academy product to captain and leader of Real Madrid https://real-madrid.ikercasillas-br.com Casillas became one of the greatest players in the history of Real Madrid.
The fascinating story of Marcus Rashford’s rise https://manchester-united.marcusrashford-br.com from academy youth to the main striker and captain of Manchester United. Read about his meteoric rise and colorful career.
The story of Luka Modric’s rise https://real-madrid.lukamodric-br.com from young talent to one of the greatest midfielders of his generation and a key player for the Royals.
Cristiano Ronaldo https://al-nassr.cristianoronaldo-br.net one of the greatest football players of all time, begins a new chapter in his career by joining An Nasr Club.
buy generic calan – buy diltiazem 180mg without prescription purchase tenoretic generic
Call 1-800-GAMBLER if you or anyone you know requires help with problem gambling. Online gambling can be addictive and is restricted to those aged 21+. This website is intended for adult users only. Compare.bet has no intention that any of the information it provides is used for illegal purposes. It is your own personal responsibility to make sure that all age and other relevant requirements are adhered to before registering with a casino operator. By continuing to use this website you agree to our terms and conditions and privacy policy. State of New Jersey Division of Gaming Enforcement Vendor Identification Number: 91075 Sports betting was officially opened in Illinois in March 2020 with the first wagers being placed at the Rivers Casino in Des Plaines. More retail and online sports betting apps opened from there, making Illinois a sports betting destination in the United States.
http://pskorean.cafe24.com/bbs/board.php?bo_table=free&wr_id=14170
Dimers provides NBA lovers with NBA picks every day, including insights into the likelihood of each team becoming this season’s champion. Below, you’ll find detailed information on the top five most likely contenders for the championship. Make your best NBA Finals bets today as the series will officially tip-off from the TD Garden in Boston next Thursday, June 6. According to Dimers’ in-house NBA Championship Odds, the team with the most favorable outlook of winning the NBA title is the Boston Celtics, followed by the Minnesota Timberwolves. Additionally, by taking advantage of the sportsbook offers listed below, you can maximize the value of your NBA futures bets through the power of sign-up deals. It’s fitting that the 2024 NBA Championship will be won by either the Celtics or Mavericks. Since the All-Star Break, Boston and Dallas have clearly been the two best teams in the NBA.
leflunomide 20mg oral – purchase arava pills purchase cartidin without prescription
At the onset of their second-round series, the Edmonton Oilers were a solid Stanley Cup betting odds favorite over the Vancouver Canucks. Edmonton is a… You can email the site owner to let them know you were blocked. Please include what you were doing when this page came up and the Cloudflare Ray ID found at the bottom of this page. The favorite in a game has a negative moneyline (example: -150). The underdog has a positive moneyline (example: +135). The odds represent the payouts on a $100 wager. So for a favorite at -150 the bettor would wager $150 to win $100. For an underdog at +135 the bettor would wager $100 to win $135. You can email the site owner to let them know you were blocked. Please include what you were doing when this page came up and the Cloudflare Ray ID found at the bottom of this page.
https://felixfhij197530.mybjjblog.com/top-nba-bets-today-41230345
Over under: One of the simplest and most popular MLB betting options, this is simply a bet on how many runs will be scored in a given game. If the over under for San Diego vs. Colorado is 9.5, over bets cash if the two teams combine to score 10 runs or more while under bets cash if they combine for nine runs or fewer. Another common bet is on the run line. That does incorporate a point spread, which is typically 1.5 runs with the odds changing. The Braves are 17-65 (.207) when trailing entering the 8th inning since the 2023 season — best in MLB; League Avg: .104. Mike has years of experience and an unmatched track record of success. With his knowledge and expertise, he consistently delivers accurate sports picks that give his clients an edge over the bookmakers. Do yourself and your bankroll a favor; invest in a subscription and start making money today.
купить диплом в россоши [url=https://ast-diplomas.com/]ast-diplomas.com[/url] .
Explore the remarkable journey of Vinicius Junior https://real-madrid.vinicius-junior.net, the Brazilian prodigy who conquered the world’s biggest stage with his dazzling skills and unparalleled ambition at Real Madrid.
A fascinating story about Brazilian veteran Thiago Silva’s https://chelsea.thiago-silva.net difficult path to the top of European football as part of Chelsea London.
The fascinating story of the phenomenal rise and meteoric fall of Diego Maradona https://napoli.diegomaradona.biz, who became a cult figure at Napoli in the 1980s.
Rivaldo, or Rivaldo https://barcelona.rivaldo-br.com, is one of the greatest football players to ever play for Barcelona.
Преимущества аренды склада https://efrprograms.ru/preimushhestva-arendy-sklada-kak-arenda-skladskih-pomeshhenij-mozhet-uluchshit-vash-biznes/, как аренда складских помещений может улучшить ваш бизнес
The story of Kanye West https://the-college-dropout.kanye-west-fr.com, starting with his debut album “The College Dropout,” which changed hip-hop and became his cultural legacy.
Discover Rafael Nadal’s https://mls.inter-miami-fr.com impressive rise to the top of world tennis, from his debut to his career Grand Slam victory.
Explore the career and significance of Monica Bellucci https://malena.monica-bellucci-fr.com in Malena (2000), which explores complex themes of beauty and human strength in wartime.
Inter Miami FC https://mls.inter-miami-fr.com has become a major player in MLS thanks to its star roster, economic growth and international influence.
Tyson Fury https://wbc.tyson-fury-fr.com is the undefeated WBC world champion and reigns supreme in boxing’s heavyweight division.
My spouse and I stumbled over here by a different web page and thought I might check things out. I like what I see so now i am following you. Look forward to finding out about your web page for a second time.
[url=https://lyricawithoutprescription.com/]lyrica 150 price[/url]
[b]Привет всем[/b])
Хорошо быть студентом, пока не придет пора писать диплом, что и произошло со мной, но не стоит отчаиваться, ведь есть хорошие компании что помогают с написанием и сдачей диплома на хорошие оценки!
Изначально искал информацию про купить диплом в ростове, купить диплом железнодорожника, купить свидетельство о разводе, купить диплом в минусинске, где купить диплом образование, потом попал на http://l-avt.ru/support/dialog/?PAGE_NAME=profile_view&UID=68709 и там решили все мои учебные заботы!
Успешной учебы!
The new Premier League https://premier-league.chelsea-fr.com season has gotten off to an intriguing start, with a new-look Chelsea looking to return to the Champions League, but serious challenges lie ahead.
An exploration of the history of Turin’s https://turin.juventus-fr.org iconic football club – Juventus – its rivalries, success and influence on Italian football.
The iconic Anfield https://enfield.liverpool-fr.com stadium and the passionate Liverpool fans are an integral part of English football culture.
Единственная в России студия кастомных париков https://wigdealers.ru, где мастера индивидуально подбирают структуру волос и основу по форме головы, после чего стригут, окрашивают, делают укладку и доводят до идеала ваш будущий аксессуар.
perast Budva Montenegro
Information about the new NTT INDYCAR SERIES video game will be available in the future at indycargame. For more information about Motorsport Games visit: motorsportgames. Verstappen is a known fan of iRacing, so it looks like he may be getting his wish, as Motorsport Games and rFactor seem to have become total pariahs in the sim racing world over the recent months. Watch the IndyCar Game Trailer here: There is no crack version for the game on here, because it asks me for a password line and that isn’t included in this game. HELP!!! Motorsport Games has now sold the NASCAR license to iRacing while also losing its agreements with BTCC and IndyCar. The company remains in debt without the funds to continue on for the next few months, a sign that things may continue to get worse for the studio.
https://arlinkdirectory.com/listings12748815/plants-vs-zombies-battle-for-neighborville-switch
Newsletter Sign Up Passionately independent, from our humble beginnings to being a world-leading esports agency, everything we do is for our love of the games, community and players. Finish the game within 15 hours. From subject matter expert Lou Russell, Rocket: The Project Management Game is a competitive team simulation emphasizing simple, fast, and flexible techniques for ensuring project success. The most popular Android AppStore for Persian speakers Download and Install thousands of free and paid Android apps in Iran. Rocket Factory is an educational game for the Apple II. Build A Rocket Boy Marco Bilellomarco.bilello@buildarocketboy Download Bazaar Application The most popular Android AppStore for Persian speakers The Goodwin team was Andrew Davis, Richard Bloomfield, and Andrew Crouch with support from Dulcie Daly, Anuj Ghai and Sophie Entwisle.