Hej kära läsare. Den här dagen ska vi prata om, i stort sett, intressant sak som CSS-animation. Det vill säga, denna animering av element görs endast med hjälp av stilar och inga skript används här.
Som du kan se finns det ett attribut här :sväva, som ändrar bakgrundsstilen vid hovring i vissa exempel bör det krävas.
Ändra färgen på ett element smidigt när du håller muspekaren med hjälp av övergång
#box1 (
margin-bottom: 5px;
bakgrundsfärg: #ccc;stoppning: 10px;
text-align: center;
bredd: 200px;
höjd:100px;text-indent: 0px;
kant: 1px fast #888;
-moz-övergång: bakgrundsfärg 0,8s 0,1s lätthet;
-o-transition: bakgrundsfärg 0,8s 0,1s lätthet;
-webkit-transition: bakgrundsfärg 0.8s 0.1s lätthet;
markör: pekare ;)#box1 :sväva {
bakgrundsfärg: #97CE68;
färg: #333;
}
Som du kan se uppnådde vi denna animering med hjälp av attributet övergång. Här kan du ändra animeringshastigheten i sekunder, in I detta fall kostar 0,8 s tills färgen ändras helt när man svävar och 0,1 s innan animeringen fungerar efter att man svävat och tagit bort markören. (Förlåt för pusslet :-)) Detta värde kan ändras efter behov.
Bakgrundsfärgen vid hovring är inställd som ett attribut :sväva, det krävs här, annars fungerar inte animeringen.
Ändra storlek på ett element
#box2 (
margin-bottom: 5px;
bakgrundsfärg: #ccc;
färg: #333;stoppning: 10px;
text-align: center;
bredd: 200px;
höjd:100px;text-indent: 0px;
kant: 1px fast #888;
-moz-transition: alla 1:or linjära;
-o-övergång: alla 1:or linjära;
-webkit-transition: alla 1:or linjära;
markör: pekare ;)#box2 :sväva {
bakgrundsfärg: #97CE68;
färg: #000;
bredd: 150px;
höjd:50px;
}
I det här exemplet uppnådde vi en jämn förändring av storleken på blocket vid hovring. Standardvärdet är 200 gånger 100 och svävningsvärdet är 150 gånger 50, vilket anges av attributet :sväva.
Här kan du också ändra blocket bara i bredd eller höjd, du behöver bara :sväva radera bredd:— blocket ändras endast i höjd, höjd:— blocket ändras endast i bredd.
Du kan också ändra förändringshastigheten. I det här fallet är det 1s.
Objekt torsion
#box3 (
margin-bottom: 5px;
bakgrundsfärg: #ccc;
färg: #333;stoppning: 10px;
text-align: center;
bredd: 200px;
höjd:100px;text-indent: 0px;
kant: 1px fast #888;
-moz-transition: all 1s 0.1s ease-in;
-o-transition: all 1s 0.1s ease-in;
-webkit-transition: all 1s 0.1s ease-in;
markör: pekare ;)#box3:hover (
bakgrundsfärg: #97CE68;
färg: #000;
-webkit-transform: rotate(360deg);
-moz-transform: rotera (360 grader);
-o-transformera: rotera (360 grader);
}
Torsion uppstår med hjälp av omvandla Och övergång. I det här fallet roterar objektet medurs 360 grader med en hastighet av en sekund. Om du vill att blocket ska rotera moturs, omvandla värde ska sättas till - (minus). Naturligtvis kan rotationsgraden ändras.
Smidigt zooma in och ut ur ett objekt
#box4 (
margin-bottom: 5px;
bakgrundsfärg: #ccc;
färg: #333;
stoppning: 10px;
text-align: center;
bredd: 200px;
höjd:100px;text-indent: 0px;
kant: 1px fast #888;
-moz-transition: all 3s ease-out;
-o-transition: all 3s lättnad ut;
-webkit-transition: alla 3:or lätta ut;
markör: pekare ;)#box4:hover (
bakgrundsfärg: #97CE68;
färg: #000;
-webkit-transform: skala(2);
-moz-transform: skala(2);
-o-transform: skala(2);
}
I det här exemplet ökar blocket smidigt i storlek med 2 gånger. Detta värde är inställt transformera: skala(2). Om du ställer in värdet till 1,5 kommer blocket att förstoras med 1,5 gånger.
På samma sätt som du kan minska storleken block, ställ till exempel värdet till 0,5.
Smidig blockväxling nedåt
#box5 (
margin-bottom: 5px;
bakgrundsfärg: #ccc;
färg: #333;
stoppning: 10px;
text-align: center;
bredd: 200px;
höjd:100px;text-indent: 0px;
kant: 1px fast #888;
-moz-transition: alla 1s lätta-in-ut;
-o-transition: alla 1:or lätta-in-ut;
-webkit-transition: alla 1s lätta-in-ut;
markör: pekare ;)#box5:hover (
bakgrundsfärg: #97CE68;
färg: #000;
-webkit-transform: translate(0.50px);
-moz-transform: translate(0.50px);
-o-transform: translate(0,50px);
}
Här anges rörelsen i pixlar. I det här fallet (0,50 px). Du kan också få blocket att stiga upp med detta värde på 0.-50px. Eller diagonalt ner 50px, 50px. Med ett ord, blocket kan fås att flytta var som helst.
Det var i princip allt jag ville säga. Nej, inte allt :-) Jag glömde att påminna dig om att denna CSS-animation kan appliceras på alla objekt på webbplatsen: bilder, text, rubriker, ikoner, etc. För länkar är en jämn färgändring perfekt enligt min mening, den är väldigt vacker. :-)
Och även denna information delades med oss av webbplatsen shpargalkablog.ru. Vilket jag tackar honom så mycket för.
Det är helt säkert nu :-) Vi ses snart, vänner.
Denna samling innehåller de bästa och högsta CSS-funktionerna. Här kan du hitta olika och fantastiska demoexempel och tekniker från kända layoutdesigners och designers som försöker bevisa att det nu är möjligt att göra nästan allt med enbart ren CSS. Du kan också hitta flera lektioner här som berättar i detalj hur du gör en sådan skapelse. Jag hoppas att denna samling kommer att vara användbar för dig.
CSS 3D-moln
I denna demo kommer du att kunna skapa och redigera snygga moln i 3D. Dessa CSS-moln gör det klart för oss att webbteknologiernas möjligheter är nästan obegränsade.
Rena CSS-logotyper
Det här är exempel på logotyper som endast är gjorda med ren CSS. Tänk bara på det, inga bilder användes vid skapandet. Det är bara något.
Alfabet med CSS-animation
Bra och konstnärligt exempel på att använda CSS i alfabetet
3D-navigering för webbplatsen
En enkel men väldigt snygg navigeringsfält för sajten, naturligtvis gjord med endast CSS3. inga bilder eller skript.
Google Doodle med CSS
En av många doodles från Googles sökmotor, gjord i CSS. Det här är ett bra exempel kvalitetsanvändning CSS-animationer
Skjutreglage
En välgjord bildreglage av hög kvalitet. Plus 4 exempel i demon.
Dubbel animerad ring
En vacker animerad och flerfärgad ring med inte mycket CSS-kod
Oskärpa i CSS
Det förefaller mig väldigt önskat filter, speciellt eftersom den är gjord i ren CSS. Med oskärpa kan du dra användarens uppmärksamhet till en viss punkt.
Den kompletta guiden till Flexbox
Den här artikeln handlar om adaptiv Flexbox block. Den talar helt om dessa block, även om artikeln är på engelska.
Färgglad och animerad meny med CSS3
En vacker rullgardinsmeny för en webbplats med ikoner. Ett stort plus är att den är helt tillverkad i CSS.
CSS-filter
Högkvalitativt material på engelska, som talar om att använda CSS-filter på bilder.
CSS-formulär
Inlägg om CSS-formulär med många exempel
Förloppsindikatorer i CSS
En lektion om hur man skapar snygga förloppsindikatorer med ren CSS och animation. Du kan också se ett exempel och ladda ner källorna.
Animation - Animate.css
Mest populärt projekt CSS-animationer på Internet idag. Och förmodligen den enklaste och högsta kvaliteten, och dessutom gratis.
Laddningsindikatorer - Spinkit
För att vara ärlig har dessa indikatorer redan setts på bloggen, men det verkar för mig att de är värda att visa er igen. Eftersom dessa är de vackraste indikatorerna på Internet med CSS.
Knappar
Nu är knapparna på CSS redan svårt att överraska, men det här är ett ganska bra alternativ
Generator för att skapa switchar
Liten och högkvalitativt internet en applikation med vilken du kan skapa vackra switchar för användning på sajten.
Verktygstips
CSS-bibliotek för gratis verktygstips - Hint.css
Färgscheman
Färgscheman för personer som inte gillar att gräva i kod
| 18.02.2016
CSS3 öppnas obegränsade möjligheter till UI-designers, och den största fördelen är att nästan alla idéer enkelt kan implementeras och förverkligas 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 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 form 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 div block 500x309 pixlar i storlek, initial bakgrundsfärg #6d6d6d och övergångslängd från ett tillstånd till ett annat 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 genomförandet av en sådan effekt ett ganska mödosamt arbete, med matematiska beräkningar vissa värden RGB. Nu räcker det att skriva ner CSS-stil, där du måste lägga till pseudo-class:hoveren till väljaren och set 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-animering ä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.
4. Dämpning
Effekt jämnt förfall- detta är i själva verket en normal 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; )
Byt värdena för motsatt resultat:
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
Att 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 cirkel
En av de vanligaste animationerna är ett rektangulärt element som förvandlas till en cirkel när man håller muspekaren över. Använda egendom CSS gränsradie, som används i kombination med :hover och transition , kan detta implementeras 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 vi redan känner till box-skugga egenskaper(kommer att skapa en flerskiktsskugga) och transformera med parametern translateX(-7px) (kommer att säkerställa att blocket flyttas horisontellt till 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 prefixet -moz) |
| 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-) |
Resten av 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-animation används ganska ofta. Det är dags för även de mest nybörjare webbplatsbyggare att förstå vad CSS-animation är och hur man skapar den. Du kanske tror att CSS3-animering handlar om att få block att flytta och det ser ut som en tecknad serie. Men CSS-animation handlar inte bara om att flytta ett element från en punkt till en annan, utan också om distorsion och andra transformationer. För att göra detta tydligt även för nybörjare skrev jag ner allt steg för steg.
1. Grundläggande egenskaper för CSS3-animering
Ett litet teoretiskt block från vilket du kommer att förstå vilka CSS3-egenskaper som är ansvariga för animering, samt vilka värden de kan ta.
- animationsnamn — unikt namn animationer (nyckelramar, vi pratar om dem lite senare).
- animation-varaktighet— animationens varaktighet i sekunder.
- animation-timing-funktion— animationshastighetsändringskurva. Vid första anblicken är det väldigt oklart. Det är alltid lättare att visa med ett exempel, och du ser dem nedan. Kan ta följande värden: linjär | lätta | lätta in | lättnad | cubic-bezier(n,n,n,n) .
- animationsfördröjning— fördröjning i sekunder innan animeringen startar.
- animation-iteration-count— antal animationsrepetitioner. Det kan anges antingen helt enkelt som ett nummer, eller så kan du ange oändligt och animeringen kommer att köras i det oändliga.
Här är bara de grundläggande egenskaperna, som är mer än tillräckligt för att skapa din första CSS3-animation.
Det sista vi behöver veta och förstå från teorin är hur man skapar nyckelramar. Detta är också lätt att göra och görs med @keyframes-regeln, inom vilken nyckelramarna specificeras. Syntaxen för denna regel är:
Ovan ställer vi in den första och sista bilden. Alla mellanliggande tillstånd kommer att beräknas AUTOMATISKT!
2. Verkligt exempel på CSS3-animation
Teorin är som vanligt tråkig och inte alltid tydlig. Det är mycket lättare att se allt på verkligt exempel, men det är bäst att göra det själv på en HTML-testsida.
När du lär dig ett programmeringsspråk skriver du vanligtvis ett "Hej världen!"-program, från vilket du kan förstå syntaxen för detta språk och några andra grundläggande saker. Men vi studerar inte ett programmeringsspråk, utan ett beskrivningsspråk utseende dokumentera. Därför kommer vi att ha vår egen "Hej, värld!"
Så här gör vi till exempel: låt oss ha något slags block Det verkar som att allt är klart - du behöver bara komprimera blocket I början HTML-uppmärkning. Det är väldigt enkelt eftersom vi bara arbetar med ett element per sida. Och här är vad som finns i stilfilen: Som du kan se specificerade vi bara den första och sista nyckelramen, och alla mellanliggande "byggdes" automatiskt. Din första CSS3-animation är klar. För att konsolidera den kunskap som vunnits, skapa HTML-dokument Och CSS-fil, och sätt in där (a bättre med händerna print) koden från exemplet. Då kommer du definitivt att förstå allt. Prova sedan samma sak med höjden på blocket (det ska minska i höjd) för att säkra materialet. Ovan har du lärt dig hur du enkelt skapar CSS3-animationer. Om du försökte göra detta med dina egna händer, förstår du redan hela processen och nu vill du ta reda på hur du kan skapa en mer komplex och vacker animation. Och det går verkligen att skapa. Nedan finns 3 lektioner där animering skapas på samma sätt som i exemplet ovan. 3 lektioner på CSS-animationer(omvandlingar) Lektionerna hjälper dig att förstå CSS-animation ännu bättre. Huvudsaken är att försöka upprepa det du ser på lektionerna. Eller åtminstone prova att ändra fastighetsvärden och se vad som händer, då blir du mindre rädd för CSS. Mycket av det som ger oss glädje i animation kommer från att flytta runt på skärmen olika föremål. Hover CSS-effekter lockar användarnas uppmärksamhet till innehållet, en viss del av gränssnittet, och förbättrar den övergripande uppfattningen av resursen. Att flytta runt kan vara lite galet, så här: Rörelsen kanske inte är så tydlig. Till exempel den som visas när du för musen över en av rutorna i figuren nedan: Din webbläsare stöder inte inline frames eller är för närvarande konfigurerad att inte visa inline ramar. I de givna exemplen implementeras rörelse med använder CSS. Både animation och CSS-övergångar gör det extremt enkelt att gå från statisk till rörlig. Men trots denna enkelhet finns det vissa nyanser som måste beaktas för att CSS-hovringseffekten ska fungera smidigt vid hovring. I den här artikeln kommer jag att berätta exakt om dem. När du flyttar ett element ändras dess vertikala och horisontella positioner. Det finns flera CSS-egenskaper som används för detta. Men jag vill rekommendera dig att använda translate3d-funktionen för transform-egenskapen istället för den vanliga marginalen , padding , left , top eftersom det ger smidigare animering. Translate3d-funktionen tar tre argument, men låt oss först titta på de som är ansvariga för att flytta innehåll horisontellt och vertikalt: X-argumentet anger horisontell rörelse, Y – vertikal rörelse. Om du till exempel vill flytta innehåll 20 pixlar åt höger och uppåt, bör translate3d-funktionen se ut så här: Foo ( transform: translate3d(20px, 20px, 0px); ) Vi kommer inte att överväga det tredje argumentet, som bestämmer rörelsen längs Z-axeln. Eftersom vi är intresserade av 2d-hover CSS-effekter. Som du kan se är translate3d-funktionen inte särskilt komplicerad. Därefter ska vi titta på hur man använder det i CSS-animation för att skapa rörelse. För att använda den här egenskapen i en övergång måste du genomföra två steg. Först måste du ange transform som egenskapen som ska spåra övergången: PictureContainer img (position: relativ; topp: 0px; övergång: transform .2s lätthet-in-ut;) När du har definierat en övergång kan du ställa in transform-egenskapen med translate3d-funktionen: PictureContainer img:hover ( transform: translate3d(0px, -150px, 0px); ) Som visas i exemplet i början av artikeln, gör CSS-hovringseffekten när du håller muspekaren över något av elementen att bilden flyttas uppåt med 150 pixlar. Vid animering, se till att nyckelbildrutorna i @keyframes innehåller en transformeringsegenskap med translate3d : @keyframes bobble ( 0% ( transform: translate3d(50px, 40px, 0px); animation-timing-function: ease-in; ) 50% ( transform: translate3d(50px, 50px, 0px); animation-timing-function: ease -out;) 100% (translate: translate3d(50px, 40px, 0px); )) Exemplet från artikeln innehåller allt du behöver för att se hur CSS-hovereffekten fungerar för tabelllayout. För att markeringen ska fungera olika webbläsare, se till att använda leverantörsprefix eller biblioteket --prefix-free för transform-egenskapen. Du kan också skapa rörliga animationer i JavaScript. Samma regler gäller här. Först måste du ställa in positionen med transform translate3d , men i JavaScript är detta lite mer komplicerat. Kodavsnittet som behövs för detta ser ut så här: funktion getSupportedPropertyName(egenskaper) (för (var i = 0; i< properties.length; i++) {
if (typeof document.body.style] != "undefined") {
return properties[i];
}
}
return null;
}
var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"];
var item = document.querySelector("#theItem");
var transformProperty = getSupportedPropertyName(transform);
if (transformProperty) {
item.style = translate3d(someValueX, someValueY, 0px);
} Den här koden verkar komplicerad eftersom vi använder prefix och kontrollerar för att matcha versionen av transformeringsfunktionen som används. Varför är det inte lämpligt för oss att etablera en tjänst med med marginal, topp , vänster osv? Om du inte har en specifik anledning att göra det, använd inte muspekaren för att skapa CSS-effekter
marginalegenskaper, stoppning , topp , vänster , botten eller höger . Även om detta kan verka kontraintuitivt. Låt mig förtydliga... När du ändrar uppsättningen av värden för de sex CSS-egenskaper jag just listade, gör webbläsaren ytterligare beräkningar om hur det kommer att visas i layouten på hela sidan. Jag är inte emot att använda dessa egenskaper för layoutarbete. Men att använda dem i animationer eller övergångar och ändra värden sextio gånger per sekund är för mycket. Du kan ställa in positionen för elementet du flyttar till fast eller absolut. Detta kommer att rädda webbläsaren från att behöva beräkna layouten för hela dokumentet. Men i det här fallet utför webbläsaren fortfarande beräkningar på elementet som rör sig. Och resultatet av att använda translate3d kommer inte nödvändigtvis att vara identiskt med resultatet som erhålls med marginal, utfyllnad, etc. Dessutom, som du kommer att se i nästa avsnitt, kommer de inte att vara 100% identiska. När vi har att göra med att visa element på skärmen kan de tillhörande beräkningarna göras med hjälp av en processor eller grafikkort. Men för CSS skapande svävningseffekter för tabelllayout det är bättre att använda ett grafikkort: GPU:n är endast utformad för att hantera skärmrelaterade uppgifter. Samtidigt bearbetar processorn ett stort antal olika uppgifter parallellt. Och för att din animation ska visas smidigt kan du inte försumma detta mönster. Skillnaden i jämnheten på animationsskärmen kanske inte är särskilt märkbar på en kraftfull stationär dator eller bärbar dator, men kommer tydligt att synas på Mobil enheter. Från personlig erfarenhet Jag kan säga att på dessa enheter spelas animationer som använder CPU:n mer hackigt än de som använder GPU. Hur man säkerställer att animationen är in hårdvaruacceleration använde du GPU? Använd translate3d! När du transformerar ett element med translate3d, bearbetas det genom GPU:n i Webkit-webbläsare som Chrome och Safari ( som är installerade på iPhone och iPad), i Internet Explorer 9/10 och även i senaste versionerna Firefox. Detta ger translate3d tydliga fördelar. När det gäller CSS-hovringseffekter skapade i JavaScript, där all interpolation hanteras av kod, vet jag faktiskt inte om GPU-användning så produktivt. Men att installera med använder JavaScript CSS-övergångar och animationer med translate3d-egenskapen används av GPU:n. När du använder JavaScript för att ställa in animerings- eller övergångsegenskaper skapas fortfarande interpolationen mellan start- och slutpunkterna för animeringen av webbläsaren. De rörliga blå cirklarna som du kanske har sett i början av den här artikeln är ett bevis på detta. Gud välsigne förvandlingen! Anledningen till att transformationen är mer presterande är att den inte påverkar några andra element. Alla åtgärder du utför gäller bara ett element, och webbläsaren behöver inte bygga om hela fönstret. Det ändrar bara den del av skärmen som innehåller det rörliga innehållet. Detta beror inte på om GPU är inblandad eller inte. 1
<div class = "toSmallWidth" >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.toSmallWidth (marginal: 20px auto; /*externa marginaler i toppen och botten av 20px och justering i mitten*/ bakgrund:röd; /*röd bakgrund av blocket*/ höjd: 100px; /*blockhöjd 100px*/ bredd: 800px; /*initial bredd 800px*/-webkit-animationsnamn: animWidthSitehere; -webkit-animation-duration: 5s; /* egenskap med ett prefix för webbläsare Chrome, Safari, Opera */ animationsnamn: animWidthSitehere; /* ange namnet på nyckelbildrutorna (finns nedan)*/ animation-varaktighet: 5s; /*ställ in varaktigheten för animeringen*/
}
/* nyckelbildrutor med prefix för webbläsare Chrome, Safari, Opera */
@-webkit-keyframes animWidthSitehere ( från (bredd: 800px;) till (bredd: 100px;)) @keyframes animWidthSitehere ( från (bredd: 800px;) /*första nyckelbildrutan där blockbredden är 800px*/ till (bredd: 100px;) /*sista nyckelbildruta, där blockbredden är 100px*/
}
3. Mer komplexa CSS3-animationsexempel
Transformation med translate3d()
Övergång
Animation
Glöm inte prefix
Övergångar med JavaScript
Onödiga beräkningar
Hårdvaruacceleration
Hur är det med JavaScript?
