Det såg vi nyligen övergångar- det är bara ett sätt animationer stilegenskaper från original till slutlig skick.
Så övergångar i CSS är det specifik typ av animation, där:
- det finns bara två tillstånd: början och slut;
- animeringen är inte loopad;
- mellantillstånd styrs endast av en tidsfunktion.
Men vad händer om du vill:
- ha kontroll över mellanliggande stater?
- slinga animation?
- do olika typer animationer för en element?
- animera en specifik egenskap endast på halv sätt?
- imitera olika tidsfunktioner för olika fastigheter?
Animation i CSS låter dig göra allt detta och mer.
Animation är som en minifilm där du som regissör ger instruktioner (stilregler) till dina skådespelare (HTML-element) för olika scener (nyckelbilder).
Animationsegenskaper
Precis som transition är animationsegenskapen förkortad för några andra:
- animationsnamn: animationsnamn;
- animation-duration : hur länge animeringen varar;
- animation-timing-function: hur mellanliggande tillstånd beräknas;
- animation-delay: animering startar efter en tid;
- animation-iteration-count : hur många gånger animeringen ska köras;
- animation-direction: ska rörelsen gå i motsatt riktning eller inte;
- animation-fill-mode : vilka stilar som tillämpas innan animeringen startar och efter att den slutar.
Snabbt exempel
För att animera nedladdningsknappen kan du skriva en animation studsande:
@keyframes studsar( 0 % ( botten: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); ) 100 % ( bottom: 50px; box-shadow: 0 50px 50px rgba(0,0, 0,0,1);
Först måste du skriva en faktisk studsande animation med @keyframes och kalla den .
jag använde förkortad animationsegenskap och inkluderade alla möjliga alternativ:
- animationsnamn: studsande (samma som nyckelbildsnamn)
- animationslängd: 0,5 s (en halv sekund)
- animation-timing-funktion: cubic-bezier(0.1,0.25,0.1,1)
- animationsfördröjning: 0s (ingen fördröjning)
- animation-iteration-count: oändlig (spelar oändligt)
- animationsriktning: alternativ (går fram och tillbaka)
- animation-fill-läge: båda
@nyckelrutor
Innan du använder animering på HTML-element behöver du skriva en animation med nyckelbildrutor. I allmänhet är nyckelramar var och en mellansteg i animation. De bestäms med hjälp av procentsatser:
- 0% - första steget i animeringen;
- 50 % är halvvägssteget i animeringen;
- 100% är det sista steget.
Du kan också använda nyckelorden från och till istället för 0 % respektive 100 %.
Du kan definiera hur många nyckelrutor du vill, som 33 %, 4 % eller till och med 29,86 %. I praktiken kommer du bara att skriva några av dem.
Varje nyckelbildruta är CSS-regel, det betyder att du kan skriva CSS-egenskaper som vanligt.
För att definiera en animation, skriv helt enkelt nyckelordet @keyframes med den namn:
@nyckelrutor runt ( 0 % ( vänster: 0; topp: 0; ) 25 % ( vänster: 240 px; topp: 0; ) 50 % ( vänster: 240 px; topp: 140 px; ) 75 % ( vänster: 0; topp: 140 px ; ) 100% ( vänster: 0; topp: 0; ) ) p ( animation: runt 4s linjär oändlig; )
Observera att start 0% och slut 100% innehåller samma regler CSS. Detta säkerställer att animeringen går perfekt. Eftersom iterationsräknaren är inställd på oändlig kommer animeringen att gå från 0 % till 100 % och sedan omedelbart tillbaka till 0 % och så vidare på obestämd tid.
animationsnamn
Namn animation används åtminstone dubbelt:
- på handstil animationer med @keframes ;
- på använda animation som använder egenskapen animation-name (eller egenskapen animation stenografi).
I likhet med CSS-klassnamn kan animationsnamnet endast innehålla:
- bokstäver (a-z);
- siffror (0-9);
- understreck(_);
- bindestreck (-).
Namnet kan inte börja med ett nummer eller två bindestreck.
animation-varaktighet
Liksom övergångslängd kan animeringslängd ställas in på sekunder(1s) eller millisekunder(200 ms).
Väljare ( animationslängd: 0,5 s; )
Standardvärdet är 0s, vilket betyder ingen animering alls.
animation-timing-funktion
På samma sätt som övergångstidsfunktioner kan animationstimingfunktioner användas nyckelord, såsom linjär , ease-out eller kan definieras med godtyckliga Bezier kurvor.
Väljare ( animation-timing-funktion: lätta-in-ut;)
Standardvärde: lätthet.
Eftersom animering i CSS använder nyckelbildrutor kan du ställa in linjär funktion av tid och simulera specifik Bezier-kurva genom att definiera många mycket specifika nyckelramar. Kolla in Bounce.js för avancerad animering.
animationsfördröjning
Liksom med övergångsfördröjning kan animationsfördröjning ställas in på sekunder(1s) eller millisekunder(200 ms).
Standard är 0s, vilket betyder ingen fördröjning av något slag.
Användbart när du inkluderar flera animationer i en serie.
A, .b, .c ( animation: studsande 1s; ) .b ( animationsfördröjning: 0,25 s; ) .c ( animationsfördröjning: 0,5 s; )
animation-iteration-count
Som standard spelas animeringen bara upp en gång(värde 1). Du kan ställa in tre typer av värden:
- heltal, som 2 eller 3;
- bråktal som 0,5, som bara spelar halva animeringen;
- det oändliga nyckelordet, som kommer att upprepa animationen i det oändliga.
animation-riktning
Egenskapen animation-direction anger om i vilken ordning nyckelramar läses.
- normal : börjar vid 0 %, slutar vid 100 %, börjar vid 0 % igen.
- omvänd : börjar vid 100 %, slutar vid 0 %, börjar på 100 % igen.
- alternativ : börjar på 0 %, går till 100 %, återgår till 0 %.
- alternate-reverse : börjar på 100 %, går till 0 %, återgår till 100 %.
Detta är lättare att föreställa sig om antalet animerade iterationer är inställt på oändligt.
animation-fill-läge
Egenskapen animation-fill-mode avgör vad som händer före start av animering och efter dess fullbordande.
När man bestämmer nyckelramar kan specificeras CSS-regler, som kommer att tillämpas vid olika animeringssteg. Nu kan dessa CSS-regler kollidera med dem som redan tillämpats till animerade element.
animation-fill-mode låter dig tala om för webbläsaren om animationsstilar Också måste tillämpas bortom animation.
Låt oss föreställa oss knapp, vilket är:
- röd standard;
- blir blå i början av animationen;
- och till slut grön när animeringen är klar.
Alla moderna webbläsare, utom IE9, stöder CSS-övergångar och CSS-animationer, vilket gör att du kan implementera animering med CSS, utan att involvera JavaScript. Animation gäller för alla HTML-element, såväl som pseudoelement :före Och :efter
Webbläsarstöd
IE: 10.0
Firefox: 16,0, 5,0 -moz-
Krom: 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
För att använda animation i ditt projekt behöver du bara göra två saker:
- Skapa själva animationen med nyckelordet @keyframes
- Anslut den till elementet som behöver animeras och ange nödvändiga egenskaper.
@keyframes-regel
Regel @nyckelrutor låter dig skapa animationer med hjälp av nyckelbilder - tillstånd för ett objekt vid en viss tidpunkt.
Animation keyframes skapas med hjälp av nyckelord från Och till(motsvarande värdena 0% och 100%) eller med procentenheter, som kan ställas in så många du vill. Du kan också kombinera nyckelord och procentenheter.
Om initial ( från, 0%) eller slutlig ( till, 100%) ram, kommer webbläsaren att ställa in de beräknade värdena för de animerade egenskaperna för dem som de skulle vara om animering inte hade tillämpats.
Om två nyckelbildrutor har samma väljare, kommer den efterföljande att avbryta den föregående.
När du definierar en animation direkt efter en egenskap @nyckelrutor måste följas av namnet på denna animation (det här namnet måste sedan anges i animationsegenskapen för det element som ska animeras).
@keyframes flytta ( från ( transform: translateX(0px); ) 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )
@keyframes flytta ( från ( 50% { 100% { transform: translateX(0px); |
Vi har skapat en animation som fungerar så här:
- Start av animering ( från kunde ha skrivits 0%) — elementets position längs X-axeln är 0px;
- Mitten av animeringen (50%) - elementets position längs X-axeln är 130px;
- Slut på animering ( till vi använde 100%) - vi returnerar elementet till början av animationen, dvs. elementets X-axelposition är 0px;
Här och nedan skrev jag i exemplen flera rader med JavaScript som växelvis lägger till eller tar bort en klass med animering på ett element, så för att spela upp animeringen klickar du bara på det här elementet.
Nyckelrutor kan grupperas:
@keyframes flytta ( från ( transform: translateX(0px); ) 25%, 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )
@keyframes flytta ( från ( transform: translateX(0px); 25%, 50% { transform: translateX(130px); 100% { transform: translateX(0px); |
Du kan tilldela flera animationer till ett element. deras namn och parametrar måste skrivas i tilldelningsordningen:
element ( animationsnamn: animation-1, animation-2; animationslängd: 2s, 4s; )
element( animation-name: animation-1, animation-2; animation-varaktighet: 2s, 4s; |
Anslutning av animation till ett element görs med två kommandon - animationsnamn Och animation-varaktighet.
Animationens namn
Egendom animationsnamn anger namnet på animationen. Det rekommenderas att använda ett namn som återspeglar kärnan i animationen, och du kan använda ett eller flera ord, länkade samman med ett mellanslag - eller ett understreck _.
animationsnamn: flytta;
Tidsfunktion
Egendom animation-timing-funktion låter dig ställa in en speciell funktion som ansvarar förn. Observera att aoftast är olinjär, dvs. dess momentana hastighet i olika områden kommer att skilja sig åt. På just nu Det finns flera redan inbyggda argument för denna regel: lätthet, lätta in, lätta ut , lätta-in-ut, linjär , steg-start , stegände.
Du kan dock skapa sådana funktioner själv. Specialfunktion cubic-bezier(P1x, P1y, P2x, P2y); tar fyra argument och bygger en värdefördelningskurva baserat på dem under animeringsprocessen. Du kan öva på att skapa dina egna funktioner och se hur de fungerar på den här sidan.
Slutligen kan animationen omvandlas till en uppsättning diskreta värden med hjälp av funktionen steg(antal steg, riktning), vars argument anger antalet steg och riktningen som kan ta värden start eller avsluta .
- lätthet- standardfunktion, animeringen startar långsamt, accelererar snabbt och saktar ner i slutet. Motsvarar cubic-bezier(0.25,0.1,0.25,1).
- linjär— Animering sker jämnt över hela tiden, utan fluktuationer i hastighet; motsvarar cubic-bezier(0,0,1,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— animering börjar långsamt och slutar långsamt; motsvarar cubic-bezier(0.42,0,0.58,1).
- cubic-bezier(x1, y1, x2, y2)- se ovan.
- ärva— ärver denna egenskap från det överordnade elementet.
Visuell jämförelse
Animation med fördröjning
Egendom animationsfördröjning definierar fördröjningen innan animationen börjar spelas, inställd på sekunder eller millisekunder. En negativ fördröjning startar animeringen från en viss punkt i dess cykel, dvs. från den tidpunkt som anges i förseningen. Detta gör att du kan tillämpa animering på flera fasförskjutna element genom att endast ändra fördröjningstiden. Om du vill att animeringen ska starta från mitten, ställ in en negativ fördröjning lika med halva tiden som är inställd animation-varaktighet. Inte ärvt.
element ( animation-name: animation-1; animation-duration: 2s; animation-delay: 10s; // 10 sekunder kommer att passera innan denna animation startar)
Upprepa animering
Egendom animation-iteration-count låter dig köra animeringen flera gånger. Inte ärvt. Ställ in värdet på valfritt positivt värde 1, 2, 3 … etc. eller oändlig för oändliga upprepningar. Menande 0 eller ett negativt tal tar bort animationen från att spelas upp.
Ju närmare vi kommer gränssnittet börjar fungera, desto mer förståeligt blir det för användaren. I livet händer nästan ingenting direkt - när vi öppnar en burk läsk eller blundar innan vi går och lägger oss, observerar vi ett gäng mellanliggande tillstånd, och inte ett skarpt "öppet/stängt", som händer på webben.
I min artikel kommer jag att dela med mig av min kunskap om CSS-animation och hur man arbetar med det. Animation ger webbplatser dynamik och förbättrar förståelsen för deras kapacitet. Det ger liv till webbsidor och hjälper till med användarinteraktion. Till skillnad från CSS3-övergångar är CSS-animationer baserade på nyckelbildrutor. Som låter dig spela och repetera effekter under en viss tid, samt stoppa animeringen i loopen automatiskt.
En animation är en uppsättning nyckelbildrutor eller nyckelbildrutor lagrade i CSS:
@keyframes animation-test ( 0 % ( bredd: 100px; ) 100 % ( bredd: 200 px; ) )
Låt oss titta på vad som händer här. Nyckelordet @keyframes anger själva animeringen. Sedan kommer namnet på animationen, i vårt fall animationstest. De lockiga hängslen innehåller en lista med nyckelrutor. Vi använder en startram på 0 % och en slutram på 100 % (de kan också skrivas som från och till).
Ta en titt på koden nedan. Animation kan också ställas in på följande sätt:
@keyframes animation-test ( från ( bredd: 0; ) 25 % ( bredd: 75px; ) 75 % ( bredd: 150 px; ) till ( bredd: 100 %; ) )
Kom ihåg att om en start- eller slutram inte anges kommer webbläsaren automatiskt att upptäcka dem som om ingen animering hade tillämpats på dem.
Du kan koppla animation till ett element som detta:
Element-väljare ( animation-name: your-animation-name; animation-duration: 2,5s; )
Egenskapen animation-name anger namnet för @keyframes-animeringen. Animation-duration-regeln anger längden på animeringen i sekunder (1s, 30s, 0,5s) eller millisekunder (600ms, 2500ms).
Du kan också gruppera nyckelbildrutor:
@keyframes animation-test ( 0 %, 35 % ( bredd: 50 px; ) 75 % ( bredd: 200 px; ) 100 % ( bredd: 100 %; ) )
Flera animationer kan appliceras på ett element (väljare). Deras namn och parametrar ska skrivas i applikationsordningen:
Element-väljare ( animation-name: anim-name-1, anim-name-2; animation-duration: 1s, 3s; )
Animationsfördröjning:
Egenskapen animation-delay anger fördröjningen innan animeringen spelas upp, i sekunder eller millisekunder:
Element-väljare ( animation-name: anim-name-1; animation-duration: 3s; animation-delay: 2s; /* 2 sekunder kommer att passera innan animeringen startar */ )
Spela om animation:
Med hjälp av animation-iteration-count kan vi ange hur många gånger animationen ska upprepas: 0, 1, 2, 3, etc. Eller oändlig för looping:
Element-väljare ( animation-name: anim-name-1; animation-duration: 3s; animation-delay: 4s; animation-iteration-count: 5; /* animation-plays 5 times */ )
Elementtillstånd före och efter animering:
Med hjälp av egenskapen animation-fill-mode är det möjligt att specificera vilket tillstånd elementet kommer att vara i innan animeringen startar och efter att den slutar:
animation-fill-mode: framåt;- animationselementet kommer att vara i det sista nyckelbildsläget efter slutförande/uppspelning;
a nimation-fill-mode: bakåt;- elementet kommer att vara i tillståndet för den första nyckelbildrutan;
animation-fill-mode: båda;
- innan animeringen startar kommer elementet att vara i tillståndet för den första nyckelbildrutan, efter det att det är klart - i tillståndet för den sista.
Starta och stoppa animering:
Detta är ansvaret för egenskapen animation-play-state, som kan ha två värden: kör eller pausad.
Element-selector:hover ( animation-play-state: pausad; )
Animationsriktning:
Egenskapen animation-direction anger hur man styr i vilken riktning animeringen spelas upp. Här är de möjliga värdena:
animation-direction: normal;
- animering spelas i direkt ordning; animation-riktning: omvänd;
- animeringen spelas upp i omvänd ordning, från till till från; animation-direction: alternativ;
- även animationsrepetitioner spelas i omvänd ordning, udda - i framåtordning;
animation-riktning: alternativt-omvänd ;
- udda animationsrepetitioner spelas i omvänd ordning, jämna ettor - i ordning framåt. Funktion för jämn utmatning av animerade ramar: Egenskapen animation-timing-function låter dig ställa in en speciell funktion som ansvarar för animationens uppspelningshastighet. Som standard startar animeringen långsamt, accelererar snabbt och saktar ner i slutet. Vi har för närvarande följande fördefinierade värden:
linjär, lätt, lätta-in, lätta-ut, lätta-in-ut, steg-start, steg-slut. Du kan dock skapa sådana funktioner själv. Menande
Slutligen kan animeringen delas upp i en uppsättning individuella värden (steg) med hjälp av stegfunktionen, som tar in antalet steg och riktningen (start eller slut). I exemplet nedan består animeringen av 5 steg, varav det sista kommer att ske precis före slutet av animeringen:
Element-väljare ( animation-name: animation-name-1; animation-duration: 3s; animation-delay: 5s; animation-iteration-count: 3; animation-timing-function: steps(5, end); )
Webbläsarstöd för animering:
Värdena i tabellen indikerar den första webbläsarversionen som fullt ut stöder egenskapen.
Värden med -webkit-, -moz- eller -O- indikerar den första versionen som fungerade med prefixet.
På webbplatsen https://www.w3schools.com Du kan studera CSS-animation mer i detalj (med exempel).
Ett av de populära biblioteken för att arbeta med animationer är animera.css.
Det kan tyckas som att de svårigheter du stöter på när du arbetar med CSS-animationer inte är motiverade. Men detta är absolut inte sant.
För det första är CSS kraftfullt verktyg förbättra interaktionen med användargränssnittet. Det påverkar inte användarnas produktivitet nämnvärt. Till skillnad från JavaScript-analoger. Teknik, genom användningen datorkraft GPU tillåter webbläsare att snabbt optimera renderingshastigheten för element.
För det andra kommer flexibiliteten, hastigheten och lättheten att implementera CSS-animationer att hjälpa till att "blåsa liv" i befintliga eller nya gränssnitt. Efter att ha utvecklat allmänna och originella tillvägagångssätt och förstått teknikens särdrag kan du skapa unika användargränssnitt för nästan alla projekt.
Jag hoppas att du hittade i artikeln användbar information för dig själv. Vackra platser för alla. Glöm inte animationer :)
| 18.02.2016
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. Vi pratar om CSS3-övergångar, med vilka du kan tillåta ett element att transformera och ändra stil, till exempel när du svävar. De nio exemplen på CSS3-animationer som finns tillgängliga nedan hjälper dig att skapa en responsiv atmosfär på din webbplats, samt förbättra allmän syn sidor tack vare 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. Nu räcker det att skriva ner CSS-stil, där du måste 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;)
2. Ramens utseende
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. Gunga
Denna 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:
Tona ( opacitet: 1; ) .fade:hover ( opacitet: 0,6; )
För det motsatta resultatet, byt ut värdena:
5. Förstoring
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. Reduktion
En 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. Rotation
Ett roligt animationsalternativ är att rotera ett element med ett visst antal 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-skugga
Designers å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öd
Följande webbläsare stöder för närvarande övergångsegenskapen:
| Desktop webbläsare | |
|---|---|
| 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!
Du kan styra animeringens varaktighet, upprepning, riktning, rörelsetyp och steg. Du kan animera alla element, inklusive pseudoelement.
En förutsättning är närvaron av specifika värden. Egenskaper som är inställda på auto är inte animerade.
Safari stöder för närvarande inte pseudoelementanimationer, använd andra webbläsare för att se inlägget.
CSS-animationsexempel:
Exempel på animationskod:
@keyframes flytta ( 40 % ( vänster: 50 %; botten: 75 %; animation-timing-funktion: lätta in; ) 80 % ( vänster: 90 %; botten: -10em; ) )
Anslutande animation:
Sol (animation: flytta 15s oändligt linjärt;)
rörelse - animationsnamn 15s - varaktighet oändlig - ändlös upprepning linjär - rörelsetyp
@nyckelrutor
Själva animeringen ställs in i @keyframes-blocket. Efter @keyframes ges namnet på animationen, och innanför de lockiga hängslen finns dess steg.
Steg kan specificeras med hjälp av procentsatser eller med hjälp av nyckelorden från och till. I det här fallet kan du ändra typen av animering i steg (animation-timing-funktion):
Animation-namn
Används för att ställa in namnet på animationen.
Möjliga värden: Ett eller flera animationsnamn. Standardvärde: inget.
animationsnamn: flytta; - en animation.
animationsnamn: rörelse, solfärg; - två animationer, namn separerade med kommatecken.
Animation-varaktighet
Animationens varaktighet styrs av egenskapen animation-duration.
Möjliga värden: tid i sekunder (s) eller millisekunder (ms). I fallet med flera animationer kan tiden för var och en av dem anges avgränsade med kommatecken. Startvärdet är 0s.
Animation-timing-funktion
Egenskapen definierar animationstypen.
Möjliga värden: Smidig animation
lätthet - glidning (standardvärde) linjär - mjuk rörelse lätta in - acceleration mot slutet lätta ut - acceleration i början lätta-in-ut - mjukare glidning än lätthet
cubic-bezier(nummer,nummer,nummer,nummer) låter dig ange en komplex animationstyp. Det är bekvämt att välja värdena på cubic-bezier.com.
cubic-bezier(.24,1.49,.29,-0.48); Steg-för-steg animation
steg-start och steg-slut - låter dig ställa in steg-för-steg-animering, var noga med att ställa in specifika steg. I det här fallet sker förändringar med stegstart i början av steget och med stegslut - i slutet.
stegände Om du ställer in steg-start startar räknaren från ettor.
steps(number) - låter dig ställa in antalet steg i vilka animeringen ska utföras, medan du bara kan ställa in det sista steget utan att behöva ange mellanliggande steg.
Animation-iteration-count
Egenskapen definierar animationstypen.
Styr upprepningen av animationen. Standardvärde: 1 (animationen spelas upp en gång).
nummer - hur många gånger animeringen ska spelas.
oändlig - oändlig upprepning.
Egenskapen definierar animationstypen.
normal - animeringen spelas i normal riktning, från början till slut.
omvänd - animationen spelas i motsatt riktning, det vill säga från slutet.
alternativ - animationen spelas från början till slut och sedan i motsatt riktning.
alternate-reverse - animeringen spelas från slutet till början och sedan i motsatt riktning.
Animation-play-state
Styr stopp och uppspelning av animationen.
Möjliga värden: körs - animeringen spelas upp (standardvärde).
pausad - animeringen fryser vid första steget.
Det är inte möjligt att styra steget där stoppet ska vara, men du kan stoppa animeringen genom att: hover:
Animation-fördröjning
Egenskapen definierar animationstypen.
Med animation-delay kan du ställa in en fördröjning för animeringen innan den börjar spelas.
Möjliga värden: tid i sekunder (s) eller millisekunder (ms). Värden kan vara negativa. I fallet med flera animationer kan tiden för var och en av dem anges avgränsade med kommatecken. Startvärdet är 0s.
Animation-fill-läge
Egenskapen avgör om animeringen kommer att påverka elementet utanför animationens uppspelningstid.
ingen - animeringen påverkar endast elementet under uppspelning när det är färdigt, återgår elementet till sitt ursprungliga tillstånd.