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 den. 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 upprepa 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 nyckelbildrutor. 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 %; ) )

Du kan använda flera animationer 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 bildrutor:

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 animation-timing-funktion: cubic-bezier(P1x, P1y, P2x, P2y); tar 4 argument som input och bygger en distributionskurva för animeringsprocessen.

Du kan studera mer i detalj eller prova skapandet av dessa funktioner på webbplatsen http://cubic-bezier.com

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 ett kraftfullt verktyg för att förbättra användarupplevelsen av ett gränssnitt. Det påverkar inte användarnas produktivitet nämnvärt. Till skillnad från JavaScript-analoger. Teknik, genom användningen beräkningskraft 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 mig själv. Vackra platser för alla. Glöm inte animationer :)

UPPMÄRKSAMHET! Eftersom vi i den här lektionen kommer att analysera animering kommer jag inte att kunna visa dig ett exempel på dess arbete i bilder, så öppna kodredigeraren och skriv koden som ges i den här artikeln där.

Grunderna för skapande

Så först och främst måste du börja med hur du skapar det. Du är förmodligen van vid att någon sak i CSS implementeras genom att tilldela de nödvändiga egenskaperna med lämpliga värden till den önskade väljaren. Så när du skapar animation räcker det inte. Diagrammet ser ut så här:

Själva övergångseffekterna skapas med @keyframes

Det nödvändiga elementet ges samma animation, såväl som dess parametrar (allt detta med hjälp av egenskaper och deras värden).

Så först måste vi beskriva de nödvändiga ändringarna i @keyframes, låt oss ta en närmare titt på hur man arbetar med dem.

@keyframes syntax

Egentligen blir det lättare för mig att förklara allt för dig med hjälp av ett färdigt exempel, om än ett väldigt enkelt sådant. Här är den (koden läggs till i css-filen):

@keyframes pulse( 0%(font-size: 50px;) 50%(font-size: 60px;)) 100%(font-size: 50px;))

Så efter nyckelordet @keyframes finns det ett godtyckligt ord som kommer att fungera som namnet på animationen. I vårt fall är det "puls". Öppna sedan lockiga hängslen där de nödvändiga reglerna är skrivna.

Procentsatser är de så kallade tidsstämplarna vid vilka de angivna egenskaperna kommer att läggas till elementet. I vårt fall betyder det som skrivs följande: i början av exekveringen kommer teckenstorleken att vara 50 pixlar, i mitten kommer den att öka till 60 och i slutet kommer den att minska igen till den ursprungliga storleken.

Nyckelorden från och till kan ersätta procentsatsen, de indikerar 0 % respektive 100 %, det vill säga början och slutet av uppspelningen.

Att sätta animation till handling

För närvarande har vi bara kod som genererar en animationseffekt, men den används inte någonstans. Om du uppdaterar din webbsida kommer ingenting att förändras. Följaktligen, för att tillämpa animering, måste du utföra två steg:

Välj det element som det ska tillämpas för

Länka den till reglerna som beskrivs via @keyframes (via namnet), och ställ också in ytterligare inställningar om nödvändigt.

Låt oss försöka

I min html-fil skapade jag ett block med shadow-klassen, som innehåller en enkel textrad. Vårt mål är att tillämpa de animationseffekter som vi beskrev tidigare på detta textelement.

Det finns två nödvändiga egenskaper som måste anges i det här fallet för att allt ska fungera. För det första är detta namnet som vi skrev i nyckelbildrutorna. För det andra är det här animationens varaktighet, för utan denna parameter kommer webbläsaren helt enkelt inte att kunna spela den.

Så, förutom de stilar som vårt block redan har, lägger vi till nya:

animationsnamn: puls; animation-varaktighet: 2s;

Allt kommer alltså att upprepas 4 gånger och sedan sluta. Som du förstår kan du istället för fyra ange vilket nummer som helst.

Ändlös animation i css3

Implementeras mycket enkelt med samma egenskap. Faktum är att du bara kan ställa in antalet repetitioner till ett par tusen, detta kommer att räcka, men teoretiskt sett kommer vår animation inte att upprepas på obestämd tid.

animation-iteration-count: oändlig;

Det var allt, nu har vi gjort en oändlig upprepning. Jag rekommenderar inte att du kontrollerar om detta är sant efter att ha suttit bakom en bildskärm hela ditt liv. Detta används helt enkelt i de fall man vill att effekten hela tiden ska upprepas och inte försvinna. Om det är diskret och inte distraherar användaren, varför inte.

Fördröjning innan start

Som standard startar uppspelningen efter att sidan har laddats helt. Detta beteende kan kontrolleras med hjälp av egenskapen animation-delay. Dess värde anges i sekunder.

Riktning

En annan intressant egenskap är animation-direction. Som standard är det inställt på normalt, om du ställer in det på omvänd, kommer alla de beskrivna ramarna att köras i motsatt riktning. Låt oss kolla vad skillnaden är. För att göra detta ändrade jag effekten lite genom att lägga till ytterligare en ram.

@keyframes pulse( 0%(font-size: 50px;) 50%(font-size: 60px;) 70%(font-size: 80px;) 100%(font-size: 50px;))

Så, med en normal riktning, under den första hälften av animationen kommer teckenstorleken att öka till 60 pixlar, sedan kommer den att öka kraftigt igen, till 80, varefter den kommer tillbaka till sin ursprungliga position.

Ris. 2. Originaltextstorlek

Ris. 3. Teckenstorleken är nästan i slutet av animeringen, innan den plötsligt återgår till sitt ursprungliga tillstånd.

Nu frågar vi:

animation-riktning: omvänd;

Allt vändes upp och ner. Först kommer texten att öka med så mycket som 30 pixlar, upp till 80, och för resten av animeringen kommer den gradvis att minska för att så småningom återgå till sin tidigare storlek. Det är enkelt.

Animeringsform

Och det här är kanske en av de mest intressanta inställningarna, som du kan experimentera med under lång tid. Som standard utförs alla ändringar med samma hastighet. Denna typ av animering kallas linjär, och det finns andra utöver den.

Hälsningar, vänner! Idag kommer vi att titta på ett mycket intressant ämne - att skapa CSS-animationer med hjälp av ett riktigt exempel. Kulmen på denna handledning kommer att skapa en vacker CSS-animation av Million Dollar-logotypen.

Häftigt

Stamma

Lektionsmaterial

• Källor: Ladda ner
• Grundläggande exempel från lektionen: https://codepen.io/agragregra/pen/PKNavm
• Startmall från lektionen: https://github.com/agragregra/optimizedhtml-start-template

Lite teori

Innan du börjar skapa ett animerat exempel bör du gå igenom grunderna CSS-animationer, överväg grundläggande termer, egenskaper och regler CSS skapande animationer.

Om du redan har erfarenhet av att skapa animationer i några program, som Adobe After Effects eller det gamla Flash Professional (nu Adobe Animate), bör du vara bekant med begrepp som "Keyframes", "Tillfälliga funktioner eller rörelsedynamik", som, som i alla andra områden av animation, gäller för animering av element på en sida med CSS. Men till skillnad från att arbeta med applikationsgränssnitt skapar du dina CSS-animationer genom att skriva kod i en editor.

CSS-regel @keyframes

Att skapa en CSS-animation börjar med att deklarera namnet på animationen i ett block @nyckelrutor och definiera så kallade animationssteg eller nyckelbilder.

För att granska teorin och grunderna kommer vi att använda ren CSS, och senare, med ett mer komplext exempel, kommer vi att använda Sass-förprocessorn. Du kan lära dig mer om Sass i lektionen. Dessutom, för en djupare förståelse av grunderna i CSS, rekommenderar jag också att du läser lektionerna "CSS Basics - A Guide for Little Ones" och "All CSS Selectors in One Lesson"

Låt oss titta på @keyframes-strukturen och arbeta med keyframes på enkelt exempel:

@nyckelrutor vridning ( 0 % ( kant-radie: 0 0 0 0; transform: rotera ( 0 grader); ) 25 % ( kant-radie: 50 % 0 0 0; transformation: rotera ( 45 grader); ) 50 % ( kant- radie: 50 % 50 % 0 0; transformation: rotera(90 grader); ) 75 % ( gränsradie: 50 % 50 % 50 % 0; transformation: rotera(135 grader); ) 100 % ( gränsradie: 50 % 50 % 50 % 50 %; transformation: rotera(180 grader); ) )

I första raden ser vi det efter nyckelord@keyframes dess namn är "vändning". Det här är namnet på blocket av frameframes, som vi kommer att hänvisa till ytterligare.

Efter deklarationen öppnas ett lockigt hängslen (in i detta exempel på ren CSS), där egenskaper skrivs sekventiellt från 0 % till 100 % för varje nyckelbildruta. Observera att mellan 0% och 100% kan du infoga så många mellanvärden du vill, vare sig det är 50%, 75% eller till och med 83%. Detta är mycket likt tidslinjen för en animeringsprogram, där du kan lägga till valfritt mellanläge mellan två tillstånd.

Vidare kan detta kodblock med nyckelbildrutor appliceras på vilken CSS-väljare som helst, men oftast är de förberedda för en specifik väljare om vi vill uppnå ett visst beteende från det önskade blocket.

Åtkomst till ett block med nyckelramar

Efter att vi har ställt in nyckelramar för objektet (i verkligheten görs detta parallellt eller till och med efter att vi kommit åt blocket med nyckelramar) kan vi komma åt vårt nyskapade block. Låt oss titta på följande enkla kod från exemplet ovan:

Div (bredd: 120px; höjd: 120px; bakgrundsfärg: violett; marginal: 100px; animation: 2s ease-out 1s oändligt alternativ;)

Inget speciellt förrän på sista raden. Här bestämmer vi hur objektet initialt kommer att se ut och på den sista raden i blocket hänvisar vi till blocket med nyckelramar som kallas "vändning":

Animation: vända 2s ease-out 1s oändligt alternativ;

Om allt är relativt tydligt med definitionen av nyckelramar, behöver denna linje omedelbart förklaras. Som vi ser, först kommer CSS-egenskap"animation". Detta är en förkortning, till exempel egenskapen "marginal: 20px 30px 40px 50px", som kan delas upp i flera separata egenskaper:

Med denna analogi kan den sammansatta egenskapen "animation" delas upp i flera separata egenskaper:

Oftast skriver erfarna utvecklare inte alla dessa egenskaper separat, utan använder en kort notation och dess struktur är som följer:

animation: (1. animation-namn - namn) (2. animation-duration - duration) (3. animation-timing-funktions dynamik för rörelse) (4. animation-delay - paus före start) (5. animation-iteration- count - antal avrättningar) (6. animation-direction - direction)

Animation: animationname 2s linjär 1s oändligt omvänd

Från exemplet ser vi att vi kommer åt @keyframes-animationsnamnsblocket, ställer in varaktigheten för animeringen till 2 sekunder, dynamiken är linjär, pausen innan start är 1 sekund, animeringen upprepas i oändlighet och körs i motsatt riktning.

Som jag sa tidigare börjar den korta notationen med egenskapen " animation", följt av värden, vars sekvens är bättre att inte glömma, så att det inte uppstår någon förvirring när du skriver CSS-animation.

De flesta av dessa egenskaper kan dock utelämnas, eftersom deras standardvärden oftast kommer att uppfylla de flesta animationsskapande uppgifter. Vissa av dem kanske inte är skrivna, men resten bör anges i sekvensen som vi diskuterade tidigare. I allmänhet, för att din animation ska fungera behöver du bara två parametrar i din sammansatta egenskap - namnet ( animationsnamn) och varaktighet ( animation-varaktighet).

CSS3-animering 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 film. 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- ett unikt namn för animationen (nyckelramar, vi pratar om dem nedan).
• 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å enkelt att göra och görs med @keyframes-regeln, inom vilken nyckelramarna specificeras. Syntaxen för denna regel är följande:

Ovan ställer vi in ​​den första och sista bilden. Alla mellanliggande tillstånd kommer att beräknas AUTOMATISKT!

2. Real CSS3 Animation Exempel

Teorin är som vanligt tråkig och inte alltid tydlig. Det är mycket lättare att se allt med ett riktigt 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 "Hello, world!"-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