Home-theater-designers
CSS ger utvecklare möjlighet att väcka sina webbsidor till liv med hjälp av nyckelbildramar.
CSS -animering uppnås genom att ändra HTML -elementets initialtillstånd genom dess olika egenskaper. Några allmänna CSS -egenskaper som kan animeras inkluderar:
hur man skickar ett anonymt mejl
- Bredd
- Höjd
- Placera
- Färg
- Opacitet
Dessa allmänna CSS -egenskaper manipuleras av specifika CSS -element för att skapa önskat resultat. Om du någonsin har stött på ett animerat element på en webbsida, är chansen stor att elementet har animerats med hjälp av nyckelbilder.
Vad är ett nyckelramelement?
De nyckelramelement kan användas på ett eller flera HTML -element som den har åtkomst till. Det identifierar en specifik punkt i tillståndet för ett element och dikterar utseendet som detta element måste ha vid denna tidpunkt.
Det här kan låta som mycket att smälta, men det är faktiskt ganska enkelt. De nyckelramelement har en ganska enkel struktur som lätt kan förstås och justeras för att passa alla animationskrav.
Nyckelramar Struktur Exempel
@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}Låt oss säga att du vill animera en grön rektangulär knapp genom att göra den till en blå rund knapp.
Inom parametrarna för från avsnittet ovan måste du placera all styling som är nödvändig för att elementet ska se ut som en grön rektangulär knapp, sedan i till avsnitt, kommer du att ställa alla stylingkrav för att förvandla den här knappen till en blå rund knapp.
Om du tänker låter det inte så mycket som animering. Tja, det beror på att en nyckelkomponent i hela processen ännu inte har introducerats --- den här komponenten är animationsegenskapen.
Animationsfastigheten
De animation egendom har en uppsättning olika underegenskaper; dessa används i kombination med nyckelramstrukturen ovan för att animera det önskade HTML -elementet.
Du behöver dock bara känna till fem av dessa underegenskaper och de värden som är associerade med dem för att uppnå animering i dina projekt. Dessa egenskaper är kända som:
- Animationsnamn
- Animation-varaktighet
- Animation-timing-funktion
- Animationsfördröjning
- Animation-iteration-count
Använda animering på en webbsida
Med hjälp av scenariot ovan är målet att skapa en animerad knapp.
Knapp Animation Exempel
Animation
/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
Click!
Animationsdelen i koden ovan innehåller de fem delegenskaperna som nämndes tidigare. Varje egendom har en mycket distinkt funktion och tillsammans arbetar de för att animera alla HTML -element som de är gjorda för att rikta in sig på.
Relaterat: Så här riktar du in en del av en webbsida med hjälp av CSS -väljare
Egenskapen Animation-name
Den här egenskapen är den enskilt viktigaste egenskapen på listan. Utan animation-name egenskap , skulle du inte ha någon identifierare att skicka till nyckelramelement , vilket gör all kod inom dess parametrar värdelös.
Om du glömde att inkludera en eller två av de andra delegenskaperna kan du fortfarande ha en ganska anständig animation. Men om du har glömt animation-name egenskap du skulle inte ha någon animation.
Egenskapen Animation-duration
Den här egenskapen används för att definiera den tid som ett animerat element ska ta vid övergång från ett tillstånd till nästa.
I exemplet ovan, animation-Duration egendom är inställd på 5 sekunder (5s), så den gröna rektangulära knappen kommer att ha totalt 5 sekunder innan den helt blir en blå rund knapp.
Egenskapen Animation-delay
Den här egenskapen är viktig på grund av en anledning; vissa webbsidor kan ta några sekunder att ladda helt (på grund av flera olika faktorer). Så det animation-fördröjning egendom förhindrar att animeringen startar omedelbart om webbsidan tar lite tid att ladda.
I exemplet ovan, animation-fördröjning egendom är inställd på 4s, vilket innebär att animationen inte börjar förrän 4 sekunder efter att webbsidan har besökts (vilket ger webbsidan tillräckligt med tid att ladda innan animationen börjar).
Egenskapen Animation-iteration-count
Den här egenskapen anger hur många gånger det animerade elementet ska övergå från ett tillstånd till nästa. De animation-iteration-count egendom tar värden som är ord och siffror. Talvärdet kan vara allt från 1 uppåt, medan ordet värde vanligtvis är oändlig .
I exemplet ovan, animation-iteration-count värde är satt till oändlig , vilket innebär att så länge webbsidan är uppe kommer egenskapen för knappar att animeras från ett tillstånd till nästa, kontinuerligt.
Egenskapen Animation-timing-function
Denna egenskap dikterar rörelsen för det animerade elementet när det övergår från ett tillstånd till nästa. De animation-timing-function egenskap tilldelas vanligtvis ett av tre lätthetsvärden.
- Enkelt
- Enkelt
- Lätt-in-ut
De lätt-in-ut-värde används ovan; detta övergår långsamt animationen från ett tillstånd till det andra. Om målet är att skapa en långsam övergång när knappen förvandlas från en grön rektangel till en blå cirkel skulle du använda lättvärde . Om du bara ville ha den långsamma övergången i motsatt riktning skulle du använda lätthetsvärde .
Minska vår kod
I de flesta fall ses en förkortning av programmets längd som ett praktiskt tillvägagångssätt. Detta beror främst på att färre kodrader minskar sannolikheten för att fel går obemärkt förbi i dina program.
Koden ovan kan reduceras med fyra rader. Detta kan uppnås genom att helt enkelt använda animationsegenskapen utan att uttryckligen identifiera var och en av dess underegenskaper.
Minska koden för knappanimationsexemplet
Animation
/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}