Under de senaste åren har CSS introducerat många intressanta funktioner som gör webbutveckling roligare. En av dessa saker är CSS3-animation. Före CSS3 kunde animering endast implementeras med Javascript.
Idag kommer vi att visa dig hur du arbetar med ett CSS3-bibliotek som kommer att förvandla att skapa animationer till en trevlig och enkel process: Animate.css.
Animate.css är ett bibliotek för att skapa animationer med CSS3. Det här biblioteket stöder mer än 50 olika animationseffekter, som nästan alla fungerar i olika webbläsare, som stöds av CSS3.
Dessa effekter kan appliceras på text, bilder, former och så vidare.
Låt oss börjaFör att aktivera Animate.css, anslut obligatoriska klasser till ett sidelement. För att komma igång, inkludera filen animate.css i huvudsektionen. Du kan ladda ner biblioteket från arkivet på Github.
Som standard spelar Animate.css upp animeringen en gång när sidan laddas. För att spela animationen cykliskt, låt oss lägga till lite Javascript.
... ...
HTMLFörst måste vi tilldela .animated-klassen till önskat element, följt av animationstypklassen.
Denna text kommer att animera.
Det är det! Nu kommer animationen att spelas upp när sidan laddas. Låt oss lägga till Javascript för att spela upp animeringen när en händelse utlöses. Klassen.option är helt godtycklig, du kan ändra den så att den passar dig.
Ytterligare CSS-inställningarOm vi vill att animeringen inte ska sluta eller att körtiden ska vara annorlunda, måste vi justera några värden.
För att rulla animationen en n:te eller ett oändligt antal gånger kan vi justera attributet animation-iteration-count. Glöm inte att ange webbläsarprefixet för webkit, moz, etc. För oändlig rullning, ställ in värdet på oändligt .
Om vi behöver spela upp animationen ett visst antal gånger kan du följa den så här.
Leverantör-animation-iteration-antal: oändlig | ;
För att ändra uppspelningstiden kan du justera egenskaperna för animation-duration och animation-delay. Exempel:
Alternativ ( -webkit-animation-duration: 3s; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: 5;)
JavascriptFör att animera under någon händelse (till exempel när du klickar på den) kommer vi att använda Javascript. Låt oss först lägga till en länk.
Denna text kommer att animera. Klicka för att animera!
Med hjälp av Javascript kan vi skapa en animeringsfunktion, till vilken vi skickar namnet på animationsklassen:
$(function() ( $("#ref").click(function() (animate(".demo", "bounce"); return false; )); ));
| 18.02.2016
function animate(element_ID, animation) ( $(element_ID).addClass(animation); var wait = window.setTimeout(function())( $(element_ID).removeClass(animation)), 1300);
CSS3 öppnar för obegränsade möjligheter för UI-designers, och den största fördelen är att nästan alla idéer enkelt kan implementeras och levandegöras utan att använda JavaScript. Det är otroligt hur enkla saker kan liva upp en vanlig webbsida och göra den mer tillgänglig för användarna. Det handlar om
om CSS3-övergångar, som kan användas för att tillåta ett element att transformera och ändra stil, till exempel vid hovring. De nio CSS3-animationsexemplen nedan hjälper dig att skapa en responsiv känsla på din webbplats, samt förbättra sidans övergripande utseende med vackra, mjuka övergångar.
För mer detaljerad information kan du ladda ner arkivet med filer. Alla effekter fungerar med övergångsegenskapen.övergång
- "transition", "transformation") och pseudo-class:hover, som bestämmer stilen på elementet när muspekaren svävar över det (i vår handledning). För våra exempel använde vi en 500x309 px div, en initial bakgrundsfärg på #6d6d6d och en övergångslängd på 0,3 sekunder.
Kropp > div ( bredd: 500px; höjd: 309px; bakgrund: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; övergång: alla 0.3s lätt )1. Ändra färg när du håller muspekaren
En gång i tiden var det ett ganska mödosamt jobb att implementera en sådan effekt, med matematiska beräkningar av vissa RGB-värden. Allt du behöver göra nu är att skriva en CSS-stil där du behöver lägga till en pseudo-class:hover till väljaren och ställa in en bakgrundsfärg som smidigt (på 0,3 sekunder) kommer att ersätta den ursprungliga bakgrundsfärgen när du håller muspekaren över blocket :
Färg:hover (bakgrund:#53ea93;)En intressant och slående förvandling är den inre ramen som smidigt visas när du håller musen. Väl lämpad för att dekorera olika knappar. För att uppnå denna effekt använder vi egenskapen pseudo-class:hover och box-shadow med parametern inset (ställer in skuggan inuti elementet). Dessutom måste du ställa in skuggsträckningen (i vårt fall är den 23px) och dess färg:
Border:hover ( box-shadow: infälld 0 0 0 23px #53ea93; )
3. GungaDenna CSS-animation är ett undantag, eftersom övergångsegenskapen inte används här. Istället använde vi:
- @keyframes är ett grundläggande direktiv för att skapa bildruta-för-bildruta CSS-animering, vilket låter dig göra den sk. storyboard och beskriv animationen som en lista med nyckelpunkter;
- animation och animation-iteration-count - egenskaper för att ställa in animationsparametrar (varaktighet och hastighet) och antalet cykler (repetitioner). I vårt fall, upprepa 1.
animation: swing 0,6s lätthet;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1; ) 4. Dämpning
Fade-effekten är i huvudsak en enkel förändring av ett elements genomskinlighet. Animeringen skapas i två steg: först måste du ställa in det initiala transparenstillståndet till 1 - det vill säga fullständig opacitet, och sedan ange dess värde när du håller musen - 0,6:För att göra blocket större när du håller muspekaren över, kommer vi att använda egenskapen transform och ställa in den på skala(1.2) . I det här fallet kommer blocket att öka med 20 procent samtidigt som det behåller sina proportioner:
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. ReduktionAtt göra ett element mindre är lika enkelt som att göra det större. Om vi i den femte punkten för att öka skalan behövde specificera ett värde större än 1, då för att minska blocket kommer vi helt enkelt att ange ett värde som kommer att vara mindre än ett, till exempel scale(0.7) . Nu, när du håller musen, kommer blocket proportionellt att krympa med 30 procent av sin ursprungliga storlek:
Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Förvandling till en cirkelEn av de vanligaste animationerna är ett rektangulärt element som förvandlas till en cirkel när man håller muspekaren över. Genom att använda egenskapen CSS border-radius, som används i kombination med :hover och transition , kan detta uppnås utan problem:
Circle:hover (kantradie: 70%;)
8. RotationEtt roligt animationsalternativ - rotera ett element med ett visst belopp grader. För att göra detta behöver vi transformegenskapen igen, men med ett annat värde - rotateZ(20deg) . Med dessa parametrar kommer blocket att roteras 20 grader medurs i förhållande till Z-axeln:
Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )
9. 3D-skuggaDesigners åsikter skiljer sig åt om denna effekt är lämplig i platt design. Denna CSS3-animation är dock ganska original och används även på webbsidor. Vi kommer att uppnå en tredimensionell effekt med de redan välkända box-shadow-egenskaperna (kommer att skapa en flerskiktsskugga) och transformera med parametern translateX(-7px) (kommer att säkerställa en horisontell förskjutning av blocket åt vänster med 7 pixlar ):
Threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, #5px 3px 3px ; -webkit-transform: translateX( -7px transform: translateX(-7px )
WebbläsarstödFöljande webbläsare stöder för närvarande övergångsegenskapen:
| Internet Explorer | Stöds av IE 10 och högre |
| Krom | Stöds från version 26 (tills version 25 fungerar med prefixet -webkit-) |
| Firefox | Stöds från version 16 (i version 4-15 fungerar det med -moz- prefixet) |
| Opera | Stöds från version 12.1 |
| Safari | Stöds från version 6.1 (i version 3.1-6 fungerar det med prefixet -webkit-) |
De återstående egenskaperna som används i dessa exempel, såsom transform , box-shadow , etc., stöds också av nästan alla moderna webbläsare. Men om du ska använda dessa idéer för dina projekt rekommenderar vi starkt att du dubbelkollar kompatibiliteten mellan webbläsare.
Vi hoppas att du tyckte att dessa CSS3-animationsexempel var användbara. Vi önskar dig kreativ framgång!
CSS3-animering gör webbplatser dynamiska. Det ger liv till webbsidor och förbättrar användarupplevelsen. Till skillnad från CSS3-övergångar baseras skapande av animationer på nyckelbildrutor, som låter dig spela upp och upprepa effekter automatiskt under en viss tid, samt stoppa animeringen inom en loop.
CSS3-animering kan användas för nästan alla html-element, såväl som:före och:efter pseudoelementen. Listan över animerade egenskaper finns på sidan. När du skapar animation, glöm inte bort eventuella problem med prestanda, eftersom att ändra vissa egenskaper kräver mycket resurser.
Introduktion till CSS-animering WebbläsarstödIE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: -
Android webbläsare: 44, 4.1 -webkit-
Chrome för Android: 44
Nyckelrutor används för att ange värden för animeringsegenskaper vid olika punkter i animeringen. Nyckelrutor definierar beteendet för en animationscykel; animeringen kan upprepas noll eller fler gånger.
Nyckelrutor specificeras med @keyframes-regeln, definierad enligt följande:
@keyframes animationsnamn (regellista)
Att skapa en animering börjar med att ställa in nyckelbildrutor för @keyframes-regeln. Ramar avgör vilka egenskaper som kommer att animeras i vilket steg. Varje ram kan inkludera ett eller flera deklarationsblock av ett eller flera egenskaps- och värdepar. @keyframes-regeln innehåller namnet på elementets animering, som länkar regeln och elementets deklarationsblock.
@keyframes shadow ( från (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) till (text-shadow: 0 0 3px black;) )
Nyckelrutor skapas med hjälp av nyckelorden från och till (motsvarande värdena 0% och 100%) eller med hjälp av procentenheter, som kan anges så många du vill. Du kan också kombinera nyckelord och procentenheter. Om ramar har samma egenskaper och värden kan de kombineras till en deklaration:
@nyckelrutor flyttas ( från, till ( överst: 0; vänster: 0; ) 25 %, 75 % (överst: 100 %;) 50 % (överst: 50 %;) )
Om 0 % eller 100 % ramar inte anges, skapar användarens webbläsare dem med hjälp av de beräknade (ursprungligen inställda) värdena för den animerade egenskapen.
Om flera @keyframes-regler definieras med samma namn, kommer den sista i dokumentordningen att aktiveras och alla tidigare ignoreras.
När @keyframes-regeln har deklarerats kan vi referera till den i animationsegenskapen:
H1 ( teckenstorlek: 3,5 em; färg: mörkmagenta; animation: shadow 2s oändlig lätthet in-ut; )
Det rekommenderas inte att animera icke-numeriska värden (med sällsynta undantag), eftersom resultatet i webbläsaren kan vara oförutsägbart. Du bör inte heller skapa nyckelbildrutor för egenskapsvärden som inte har en mittpunkt, som egenskapsvärden färg: rosa och färg: #ffffff , width: auto och width: 100px , eller border-radius: 0 och border- radie: 50% (i det här fallet skulle det vara korrekt att ange kantradie: 0%).
1.1. Timingfunktion för nyckelbilderEn nyckelbildrutestilregel kan också deklarera en tillfällig funktion som ska användas när animeringen flyttas till nästa nyckelbildruta.
Exempel
@keyframes studsar ( från ( överst: 100px; animation-timing-funktion: ease-out; ) 25% ( top: 50px; animation-timing-function: ease-in; ) 50% ( top: 100px; animation-timing- funktion: ease-out; ) 75% (överst: 75px; animation-timing-funktion: ease-in; ) till (överst: 100px; ) )
Fem nyckelbildrutor är specificerade för animationen som heter "studs". Mellan den första och andra nyckelbildrutan (det vill säga mellan 0 % och 25 %), används easing-funktionen. Mellan den andra och tredje nyckelbildrutan (det vill säga mellan 25 % och 50 %), används den mjuka accelerationsfunktionen. Och så vidare. Elementet kommer att flytta upp sidan med 50px, sakta ner när det når sin högsta punkt och sedan snabba upp när det sjunker till 100px. Den andra halvan av animeringen beter sig på liknande sätt, men flyttar bara elementet 25px upp på sidan.
Tidsfunktionen som anges i nyckelbilden till eller 100 % ignoreras.
2. Animation name: animation-name-egenskapEgenskapen animation-name anger listan över animeringar som tillämpas på elementet. Varje namn används för att välja en nyckelbildruta i en regel som tillhandahåller egenskapsvärden för animeringen. Om namnet inte matchar några nyckelbildrutor i regeln, det finns inga egenskaper att animera, eller så finns det inget animationsnamn, kommer animeringen inte att köras.
Om flera animeringar försöker ändra samma egenskap kommer animeringen närmast slutet av listan med namn att köras.
Animationsnamnet är skiftlägeskänsligt och är inte tillåtet. nyckelord ingen. Det rekommenderas att använda ett namn som återspeglar kärnan i animationen, och du kan använda ett eller flera ord listade med ett bindestreck - eller understrecket _ .
Fastigheten går inte i arv.
Syntax
Animation-name: none; animationsnamn: test-01; animationsnamn: -sliding; animationsnamn: rörlig-vertikalt; animationsnamn: test2; animationsnamn: test3, move4; animationsnamn: initial; animationsnamn: ärva;
3. Animation duration: animation-duration egenskapEgenskapen animation-duration anger varaktigheten för en animeringscykel. Anges i sekunder s eller millisekunder ms. Om du har mer än en animeringsuppsättning för ett element kan du ställa in en annan tid för varje genom att lista värdena separerade med kommatecken.
Fastigheten går inte i arv.
Syntax
Animationens varaktighet: .5s; animationslängd: 200ms; animationslängd: 2s, 10s; animationslängd: 15s, 30s, 200ms;
4. Timing funktion: animation-timing-funktion egenskapEgenskapen animation-timing-function beskriver hur animeringen kommer att fortskrida mellan varje par nyckelbildrutor. Under animeringsfördröjning tillämpas inte timingfunktioner.
Fastigheten går inte i arv.
| Värden: | |
| linjär | Linjär funktion, animering sker jämnt över hela tiden, utan fluktuationer i hastighet. |
| lätthet | Standardfunktionen, animeringen startar långsamt, accelererar snabbt och saktar ner i slutet. Motsvarar cubic-bezier(0.25,0.1,0.25,1) . |
| lätta in | Animeringen startar långsamt och går sedan långsamt upp i slutet. Motsvarar cubic-bezier(0.42,0,1,1) . |
| lätta ut | Animeringen startar snabbt och saktar ner mjukt i slutet. Motsvarar cubic-bezier(0,0,0.58,1) . |
| lätta-in-ut | Animationen startar långsamt och slutar långsamt. Motsvarar cubic-bezier(0.42,0,0.58,1) . |
| cubic-bezier(x1, y1, x2, y2) | Tillåter dig att manuellt ställa in värden från 0 till 1. Du kan bygga vilken bana som helst av hastigheten på animeringsändringen. |
| steg-start | Ställer in steg-för-steg-animering, delar upp animeringen i segment, ändringar sker i början av varje steg. Utvärderas i steg(1, start) . |
| stegände | Steg-för-steg-animering, ändringar sker i slutet av varje steg. Utvärderas i steg(1, slut) . |
| steg (antal steg, stegposition) | En stegtidsfunktion som tar två parametrar. Den första parametern anger antalet intervaller i funktionen. Detta måste vara ett positivt heltal större än 0, såvida inte den andra parametern är hopp-ingen, i vilket fall det måste vara ett positivt heltal större än 1. Den andra parametern, som är valfri, anger stegpositionen - punkten där animeringen börjar, med ett av följande värden:
Med värdestart börjar animeringen i början av varje steg, med värdet slut i slutet av varje steg med en fördröjning. Latensen beräknas genom att dividera animationstiden med antalet steg. Om den andra parametern inte anges används standardvärdet slut. |
| första | |
| ärva |
Syntax
Animation-timing-funktion: lätthet; animation-timing-funktion: ease-in; animation-timing-funktion: ease-out; animation-timing-funktion: lätta-in-ut; animation-timing-funktion: linjär; animation-timing-funktion: steg-start; animation-timing-funktion: steg-slut; animation-timing-funktion: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-funktion: steg(4, slut); animation-timing-funktion: lätthet, steg-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-funktion: initial; animation-timing-funktion: ärva;
Steg-för-steg-animering kan användas för att skapa intressanta effekter, såsom text som skrivs ut eller en laddningsindikator.
5. Animationsupprepning: egenskapen animation-iteration-countEgenskapen animation-iteration-count anger hur många gånger animationsslingan spelas. Ett startvärde på 1 betyder att animationen kommer att spelas från början till slut en gång. Den här egenskapen används ofta tillsammans med animation-direction-egenskapens alternativa värde, vilket gör att animeringen spelas upp i omvänd ordning i alternativa loopar.
Fastigheten går inte i arv.
Syntax
Animation-iteration-count: oändlig; animation-iteration-count: 3; animation-iteration-count: 2,5; animation-iteration-count: 2, 0, oändlig;
6. Animation direction: animation-direction-egenskapEgenskapen animation-direction bestämmer om animeringen ska spelas i omvänd ordning på vissa eller alla loopar. När animeringen spelas upp i omvänd ordning, är också timingfunktionerna omvända. Till exempel, när den spelas i omvänd ordning, kommer ease-in-funktionen att fungera som ease-out.
Fastigheten går inte i arv.
| Värden: | |
| normal | All animering upprepas uppspelning enligt specifikationen. Standardvärde. |
| motsatt | Alla repetitioner av animationen spelas in omvänd riktning om hur de definierades. |
| alternativ | Varje udda upprepning av animationsslingan spelas i normal riktning, varje jämn upprepning spelas i motsatt riktning. |
| växelvis-omvänd | Varje udda upprepning av animationsslingan spelas i motsatt riktning, varje jämn upprepning spelas i normal riktning. |
| första | Ställer in egenskapsvärdet till standardvärdet. |
| ärva | Ärver egenskapsvärdet från det överordnade elementet. |
För att avgöra om en upprepning av en animationsslinga är jämn eller udda, börjar antalet upprepningar på 1.
Syntax
Animation-riktning: normal; animation-riktning: omvänd; animation-direction: alternativ; animation-riktning: alternativ-omvänd; animationsriktning: normal, omvänd; animationsriktning: alternativ, omvänd, normal; animation-direction: initial; animation-direction: ärva;
7. Spela animation: animation-play-state-egenskapEgenskapen animation-play-state avgör om animeringen ska starta eller pausa. Det är möjligt att stoppa animering i en loop genom att använda den här egenskapen i ett JavaScript-skript. Du kan också stoppa animeringen när du håller musen över ett objekt - state:hover .
Fastigheten går inte i arv.
Syntax
Animation-play-state: löpning; animation-play-state: pausad; animation-play-state: pausad, löpning, löpning; animation-play-state: initial; animation-play-state: ärva;
8. Animation delay: animation-delay-egenskapEgenskapen animation-delay avgör när animeringen ska starta. Anges i sekunder s eller millisekunder ms.
Fastigheten går inte i arv.
Syntax
Animation-fördröjning: 5s; animationsfördröjning: 3s, 10ms;
9. Elementtillstånd före och efter animeringsuppspelning: egenskapen animation-fill-modeEgenskapen animation-fill-mode bestämmer vilka värden som tillämpas av animationen utanför dess körningstid. När animeringen är klar återgår elementet till sina ursprungliga stilar. Som standard påverkar animering inte egenskapsvärden när animering tillämpas på ett element - animationsnamn och animationsfördröjning . Dessutom, som standard, påverkar animationer inte värdena för egenskaperna animation-duration och animation-iteration-count efter att de är klara. Egenskapen animation-fill-mode kan åsidosätta detta beteende.
Fastigheten går inte i arv.
| Värden: | |
| ingen | Standardvärde. Elementets tillstånd ändras inte före eller efter att animeringen spelas upp. |
| framåt | När animeringen slutar (som bestäms av värdet för animation-iteration-count), kommer animeringen att tillämpa egenskapsvärdena vid den tidpunkt då animeringen slutar. Om animation-iteration-count är större än noll, tillämpas värdena för slutet av den senaste avslutade iterationen av animationen (inte värdet för början av iterationen som kommer härnäst). Om animation-iteration-count är noll, kommer de tillämpade värdena att vara de som startar den första iterationen (samma som i animation-fill-mode: baklänges;). |
| bakåt | Under den period som definieras med animationsfördröjning kommer animeringen att tillämpa egenskapsvärdena som definieras i nyckelbildrutan, vilket kommer att påbörja den första iterationen av animeringen. Dessa är antingen värdena från nyckelbildruta (när animationsriktning: normal eller animationsriktning: alternativ) eller till nyckelbildrutevärden (när animeringsriktning: omvänd eller animeringsriktning: alternativ). |
| både | Tillåter att ett element lämnas i den första nyckelbildrutan tills animeringen börjar (ignorerar ett positivt fördröjningsvärde) och fördröjs på den sista bildrutan till slutet av den sista animeringen. |
Syntax
Animation-fill-mode: ingen; animation-fill-mode: framåt; animation-fill-mode: bakåt; animation-fill-mode: båda; animation-fill-mode: ingen, bakåt; animation-fill-mode: både, framåt, ingen;
10. Kort beskrivning av animation: animationsegenskapAlla parametrar för uppspelning av animationer kan kombineras i en egenskap - animation , och listar dem åtskilda av ett mellanslag:
animation: animation-namn animation-varaktighet animation-timing-funktion animation-delay animation-iteration-count animation-direction;
För att spela upp animationen räcker det att endast ange två egenskaper - animationsnamn och animationslängd , de återstående egenskaperna kommer att ha sina standardvärden. I vilken ordning fastigheterna listas spelar ingen roll, det enda är att körtiden för animation-duration måste komma före animation-delay-fördröjningen.
11. Flera animationerDu kan ställa in flera animationer för ett element genom att lista deras namn separerade med kommatecken:
Div (animation: shadow 1s ease-in-out 0,5s alternat, move 5s linear 2s;)
På många målsidor eller kampanjsidor kan du i allt högre grad hitta olika animationseffekter. När allt kommer omkring gör de sidan mer intressant och attraktiv.
I grund och botten ställs dessa effekter in antingen på någon händelse (klicka eller håll muspekaren över ett element), eller vid det ögonblick då sidan rullas. Jag tror att du har stött på sådana sajter, när du rullar på sidan visas olika element smidigt och vackert.
Tidigare, för att implementera dessa effekter, var du tvungen att endast använda JS, men utvecklingen står inte stilla och med releasen av CSS3 kan alla dessa effekter implementeras på den.
I den här lektionen kommer vi att introducera dig till ett mycket intressant verktyg som heter animate.css. Detta är en färdig CSS-stilmall, som har över 50 olika effekter i sin arsenal och alla dessa effekter är implementerade i CSS3.
För att använda det behöver du bara ställa in en viss klass för det nödvändiga elementet och en animationseffekt kommer att tillämpas på detta element. Som jag sa tidigare är denna animation implementerad i CSS3, så dessa effekter kommer att fungera i alla moderna webbläsare.
Låt oss nu titta närmare på animate.css.
Grundläggande HTML-uppmärkningTitta på videohandledning
- studsa
- flash
- puls
- gummiband
- skaka
- svänga
- vingla
- studsa in
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- studsa ut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- tona in
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- tona ut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotera in
- rotateInDownLeft
- rotera InDownRight
- roteraInUpLeft
- rotateInUpRight
- rotera ut
- roteraOutDownLeft
- roteraOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- gångjärn
- rulla in
- utrullning
- zooma in
- zooma in
- zooma in till vänster
- zooma in höger
- zooma in
- zooma ut
- zooma ut
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
Om du gjorde allt som beskrivits ovan, när sidan laddas, kommer denna effekt att tillämpas på elementet och det är det, animeringen slutar där.
Men vad händer om du behöver animeringen för att fortsätta utan att stanna?
För att göra detta, lägg bara till en annan klass för vårt animerade element. Denna klass är oändlig.
Rubrik
Ställ in animeringen när du håller musen över ett element
Titta på videohandledning
Alla de tidigare beskrivna exemplen ställer in animationen omedelbart efter att sidan har laddats, men i praktiken är detta sällan nödvändigt. I praktiken är det mycket ofta nödvändigt att ställa in en animation när man håller muspekaren över ett element, och därför har jag nedan tillhandahållit den färdiga koden för denna implementering.
HTMLVår HTML-uppmärkning har ändrats lite, nu behöver vi inte ange en klass som är ansvarig för en specifik animering. Vi måste ange detta värde i specialdata-effect-attributet. Var uppmärksam på detta, det är mycket viktigt.
Rubrik
Här är en liten jQuery-kod som kommer att övervaka mouseover-händelsen och om denna händelse inträffar kommer skriptet att lägga till en klass till den, vars värde anges i data-effect-attributet. Genom att lägga till denna klass kommer animation att tillämpas.
Funktionen animate(elem)( var effekt = elem.data("effekt"); if(!effekt || elem.hasClass(effekt)) returnerar falskt; elem.addClass(effekt); setTimeout(funktion())( elem. removeClass (effekt), 1000 ) $(".animated").mouseenter(function() (animate($(this)); ));
Naturligtvis kan du ändra detta skript som du vill, till exempel kan du ändra mouseenter-händelsen för att klicka i den. Då kommer animeringen i det här fallet inte att ske i det ögonblick som musen svävar över elementet, utan i det ögonblick då det klickas.
Gör animationer när du rullar på sidanTitta på videohandledning
Och slutligen, låt oss titta på ett annat exempel där du enkelt kan använda animate.css.
Du kan nämligen ställa in olika effekter för element när du rullar på sidan. För dessa ändamål behöver vi förutom animate.css också ett speciellt wow.js-skript.
