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://telegra.ph/diplen-plenka-kupit-08-13-3/]telegra.ph/diplen-plenka-kupit-08-13-3[/url]
каталог саженцев [url=http://rodnoisad.ru/]http://rodnoisad.ru/[/url] .
Hello every one, here every one is sharing these
experience, therefore it’s fastidious to read this webpage, and I used to pay a
visit this web site daily.
Приобретение диплома ПТУ с сокращенной программой обучения в Москве
Парадокс, но купить диплом кандидата наук оказалось не так и сложно
[url=https://mostbetcz.top]mostbetcz.top[/url]
Install latest version of the application BC mostbet – play right now!
mostbetcz.top
[url=https://mostbetscz.top]mostbet[/url]
Install latest version of the application online casino mostbet – win today!
mostbet
[u][b] Добрый день![/b][/u]
Купить документ о получении высшего образования
[url=http://nc750.ru/member.php?u=2812/]nc750.ru/member.php?u=2812[/url]
[url=http://myanimalgram.com/read-blog/566/]myanimalgram.com/read-blog/566[/url]
[url=http://avtoweek2016.ru/dostupnyie-diplomyi-dlya-vseh-spetsialnostey/]avtoweek2016.ru/dostupnyie-diplomyi-dlya-vseh-spetsialnostey[/url]
[url=http://formulaf1.ru/vash-diplom-vashe-budushhee/]formulaf1.ru/vash-diplom-vashe-budushhee[/url]
[url=http://avrorp.getbb.ru/viewtopic.php?f=183&t=713/]avrorp.getbb.ru/viewtopic.php?f=183&t=713[/url]
Если вы искали где отремонтировать сломаную технику, обратите внимание – сервисный центр в челябинске
Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники в челябинске
Cuando se trata del casino en vivo, no hay muchos juegos mejores que RTG. Sus juegos de casino en vivo cuentan con la asistencia de crupieres y utilizan cámaras de alta definición. Los usuarios de los casinos en vivo también pueden enfrentarse con otros jugadores de todo el mundo, lo que convierte a esta modalidad de juego en una experiencia realmente entretenida. Fundada en 2016 por dos ejecutivos con vasta experiencia en juegos para redes sociales y de dinero real, la misión de Kalamba, el desarrollador de juegos de casino en línea, es crear tragaperras de alta calidad que integren funciones de captación y retención de jugadores en el juego. Con niveles de volatilidad ajustables y elementos coleccionables que alargan las sesiones y la permanencia de los jugadores, Kalamba se dedica a crear tragaperras divertidas con funciones dentro del juego diseñadas para ayudar a los operadores a cumplir sus indicadores clave de rendimiento (KPI).
https://www.mrclarksdesigns.builderspot.com/board/board_topic/690695/6309781.htm
Como ya hemos comentado, todos estos juegos tragamonedas el faraón gratis son sumamente populares alrededor del mundo. Esa es la razón por la cual hay tantos títulos y con tantas similitudes. El caso de Colombia no es la excepción, en donde muchos jugadores juegan tragamonedas gratis faraón para practicar o para ver de qué trata cada juego y cómo funcionan. Por lo que sí, las tragamonedas de faraón son bastante populares. Como Se Juega Al Casino – Jugar al casino con bitcoins INSTRUCCIONES: Usa el Ratón y el Teclado Hemos puesto en marcha esta iniciativa con el objetivo de crear un sistema global de autoexclusión que permitirá que los jugadores vulnerables bloqueen su propio acceso a los sitios de juego online. Las mejores maneras de ganar con este juego de casino online es obtener 5 símbolos wilds en línea o bien alcanzar el juego de giros gratis que multiplican las apuestas. El símbolo del faraón en los rieles 1, 2 y 3 es una excelente señal, con combinaciones que harán de tu relación con Pharaoh’s Fortune una experiencia ganadora.
Если вы искали где отремонтировать сломаную технику, обратите внимание – профи ремонт
оптимизация сайта в москве недорого https://seo-5.ru
Если вы искали где отремонтировать сломаную технику, обратите внимание – профи услуги
гардины электрические [url=elektrokarniz2.ru]гардины электрические[/url] .
Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники
ремонт телевизоров в москве
Если вы искали где отремонтировать сломаную технику, обратите внимание – техпрофи
The Significance of Vibration Regulation Tools in Industrial Equipment
In manufacturing contexts, machines and spinning machinery serve as the foundation of manufacturing. However, an of the commonly frequent issues which might hinder the functionality and lifespan is resonance. Oscillation can result in a array of problems, such as decreased precision and performance to increased damage, in the end leading to high-cost downtime and maintenance. This is the point where vibration management apparatus becomes vital.
The Reason Oscillation Control remains Crucial
Vibration in equipment can result in numerous adverse impacts:
Decreased Operational Performance: Excess resonance may lead to discrepancies and instability, reducing the effectiveness of the machinery. Such may result in delayed output times along with elevated energy use.
Elevated Damage: Continuous resonance speeds up the erosion to mechanical parts, bringing about more frequent upkeep as well as a possibility for unanticipated unforeseen malfunctions. Such a situation not only elevates operating costs and decreases the durability for the machinery.
Safety Hazards: Unmanaged resonance could bring significant safety concerns to the machinery and the machines along with the workers. In, serious conditions, this can lead to catastrophic system collapse, jeopardizing personnel and resulting in considerable damage to the environment.
Precision and Quality Concerns: For fields where rely on exact measurements, such as manufacturing or aerospace, resonance might cause errors in the manufacturing process, leading to defects along with increased waste.
Economical Options for Vibration Regulation
Investing in resonance control apparatus proves not merely a necessity but a smart decision for all businesses that any company dependent on mechanical systems. The offered advanced vibration control systems are designed to designed to remove resonance within various machine as well as rotational systems, ensuring uninterrupted and productive processes.
What distinguishes such systems above the rest is its its economic value. We know the value of cost-effectiveness in the current market, which is why we have high-quality vibration management solutions at rates that are reasonable.
By choosing these tools, you aren’t simply safeguarding your machines as well as increasing its operational effectiveness but also putting resources towards the sustained success of your operations.
In Conclusion
Resonance mitigation proves to be a vital factor in ensuring the effectiveness, safety, and lifespan of your industrial equipment. With our cost-effective oscillation control systems, it is possible to ensure that your operations function efficiently, all goods remain top-tier, and your workers stay safe. Do not let vibration jeopardize your operations—invest in the correct apparatus today.
The Value of Oscillation Mitigation Tools in Industrial Equipment
Across industrial settings, equipment along with turning equipment are the core of operations. Yet, a of the most frequent challenges which might impede their performance and lifespan exists as vibration. Vibration might lead to a array of complications, including lowered precision and productivity leading to greater erosion, in the end resulting in expensive interruptions and maintenance. This scenario is when vibration management apparatus proves to be critical.
The Reason Vibrations Mitigation proves Important
Vibration in machinery might lead to multiple adverse effects:
Minimized Functional Performance: Excess vibration could result in discrepancies along with instability, reducing total effectiveness of such equipment. This can result in slower output times as well as increased energy use.
Elevated Deterioration: Persistent vibrations accelerates total deterioration to equipment components, causing more frequent repairs and the potential for unexpected failures. This doesn’t merely heightens operating costs but also limits the lifetime of the equipment.
Safety Hazards: Unchecked vibrations may introduce substantial safety concerns both to both the machines and the workers. In, serious conditions, this could lead to devastating machinery failure, endangering operators as well as leading to significant devastation to the environment.
Exactness along with Production Quality Issues: For industries that require precise production, such as manufacturing as well as space industry, resonance may bring about inaccuracies in manufacturing, resulting in defects and more waste.
Cost-effective Solutions towards Vibration Management
Investing in vibration management equipment is not merely necessary but a prudent choice for any organization that uses machines. The offered cutting-edge vibration regulation equipment work to built to remove oscillation from various mechanical systems or rotating equipment, guaranteeing uninterrupted and efficient functioning.
Something that differentiates our systems above the rest is its economic value. It is recognized that the value of cost-effectiveness within the current market, which is why our offerings include premium vibration regulation systems at prices that are affordable.
Opting for our systems, you’re not only preserving your equipment and enhancing its productivity you’re also putting resources towards the enduring success of your company.
Final Thoughts
Resonance mitigation is an essential component in ensuring the effectiveness, protection, along with lifetime of your machinery. With our affordable vibration management tools, you can be certain your processes operate seamlessly, all goods maintain high quality, along with your employees stay safe. Never let vibration jeopardize your company—invest in the correct apparatus today.
Your blog post was like a warm hug on a cold day. Thank you for spreading positivity and kindness through your words.
[u][b] Добрый день![/b][/u]
[b]Мы изготавливаем дипломы[/b] любой профессии по выгодным ценам.
[url=http://vecmir.ru/index.php/vecmirlife/search/field?FIELD_COUNTRY=CentralAfricanRepublic&start=120/]vecmir.ru/index.php/vecmirlife/search/field?FIELD_COUNTRY=CentralAfricanRepublic&start=120[/url]
vibration analysis
The Importance of Resonance Mitigation Apparatus in Machinery
Inside manufacturing settings, machinery as well as spinning machinery are the foundation of output. However, an of the most prevalent problems which can obstruct its performance and longevity exists as vibrations. Vibration may lead to a variety of issues, ranging from reduced accuracy as well as efficiency to elevated damage, eventually resulting in costly delays as well as fixes. This is the point where vibration control equipment becomes vital.
Why Vibrations Mitigation is Crucial
Vibration in industrial equipment can cause various detrimental impacts:
Minimized Functional Efficiency: Excessive vibration could bring about misalignment as well as imbalance, reducing the effectiveness of such machinery. Such may lead to slower output times and increased energy use.
Greater Erosion: Constant vibrations accelerates the erosion in equipment components, resulting in more frequent repairs as well as a risk of unexpected unexpected breakdowns. This does not just elevates operational costs but also limits the durability in the machinery.
Protection Hazards: Excessive resonance may introduce considerable safety concerns both to both the machinery and the personnel. In severe cases, extreme situations, it might result in catastrophic equipment failure, threatening workers along with resulting in significant devastation across the environment.
Exactness as well as Manufacturing Quality Problems: For fields that demand precise production, such as production or space industry, vibration might bring about errors during production, producing faulty goods and more waste.
Reasonably Priced Approaches for Oscillation Control
Investing in the vibration control apparatus is not just necessary but a sound investment for any business dependent on machinery. Our state-of-the-art vibration regulation equipment are designed to built to mitigate resonance from any mechanical systems as well as spinning equipment, providing smooth as well as productive processes.
What distinguishes these systems from others is its economic value. We understand the value of cost-effectiveness inside today’s competitive market, and for that reason we provide top-tier vibration control solutions at prices that are reasonable.
By choosing our systems, you aren’t simply securing your mechanical systems as well as improving its productivity but also investing towards the long-term achievement in your organization.
Conclusion
Vibration control is a critical aspect of maintaining the efficiency, safety, and durability of your machinery. Through our cost-effective vibration management tools, you can ensure that your processes run smoothly, all goods are of high quality, along with all personnel remain safe. Do not let vibrations affect your operations—invest in the right equipment today.
vavada: вавада – vavada casino
[url=https://alisson-becker-cz.biz]http://alisson-becker-cz.biz[/url]
last news about alisson becker
alisson-becker-cz.biz
[url=https://becker-alisson-cz.biz/]http://becker-alisson-cz.biz[/url]
last news about becker alisson
https://www.becker-alisson-cz.biz/
[url=https://benzemakarim-cz.biz]http://www.benzemakarim-cz.biz[/url]
last news about benzema karim
http://www.benzemakarim-cz.biz
[url=https://alissonbecker-cz.biz]http://alissonbecker-cz.biz[/url]
last news about alisson becker
http://alissonbecker-cz.biz
автоматические карнизы для штор цена [url=https://elektrokarniz2.ru]автоматические карнизы для штор цена[/url] .
[url=https://thibautcourtoiscz.biz]http://www.thibautcourtoiscz.biz[/url]
last news about thibaut courtois
https://thibautcourtoiscz.biz