CSS is een van de krachtigste manieren om de webpagina interactief te maken. Het transformeert de look en feel van onze basic webpagina. Een van de belangrijke en opwindende functies die CSS biedt, is dat we hiermee animaties kunnen uitvoeren. Het stelt ons in staat om de elementen binnen onze pagina te verplaatsen. Laten we onze reis van animaties in CSS in de volgende volgorde beginnen:
Animaties in CSS
Het toevoegen van animaties aan onze website is een geweldige manier om de aandacht van de gebruikers te trekken. Het voegt niet alleen waarde toe aan onze pagina, maar verrijkt ook de gebruikerservaring. De animatie in CSS is opgebouwd uit twee delen. Zij zijn
- Keyframes
- Animatie
De CSS-animaties worden in alle browsers ondersteund. Sommige oudere browsers zoals Safari (tot versie 8.0) hebben echter een prefix (-webkit-) nodig om de animatie-eigenschappen te interpreteren. Bijvoorbeeld:
.anim {hoogte: 200px breedte: 200px achtergrond: lichtblauw positie: relatieve grensradius: 100% -webkit-animatie-naam: cssanim / * oude browsers * / -webkit-animatie-duur: 5s / * oude browsers * / animatie -name: cssanim animation-duration: 5s} / * oude browsers * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}We kunnen de voorbeeld-html-pagina van hierboven gebruiken en de CSS-code in de style-tag vervangen om meer voorbeelden uit te proberen.
Keyframes in CSS
Dit is de bouwsteen van animaties in CSS. Het definieerde vroeger specifieke momenten en stijlen van de animatie op onze webpagina. Met andere woorden, wanneer we de @keyframes in onze CSS specificeren, krijgt het de controle om de huidige status naar een nieuwe staat te wijzigen of de objecten voor een bepaalde duur te animeren.
De @keyframes moeten bepaalde eigenschappen hebben om de animatie te besturen, zoals de naam van de animatie, fasen en eigenschappen.
Naam - Elke animatie moet een naam hebben om het gedrag te beschrijven.
Stadia - Het podium vertegenwoordigt de voltooiing van een animatie. Het kan worden aangegeven met het trefwoord 'aan' en 'van' of als een percentage, terwijl 0% de beginstatus vertegenwoordigt en 100% de eindtoestand van een animatie. Het voordeel van het gebruik van de procentuele weergave is dat we meerdere tussenstadia daartussen kunnen definiëren, d.w.z. wat zou het gedrag van animatie moeten zijn in een fase van 50% of 75% enz.
Eigendommen - Deze eigenschappen geven ons controle over de @keyframes om ze tijdens de animatie te manipuleren.
.anim {hoogte: 200px breedte: 200px achtergrond: lichtblauw positie: relatieve grensradius: 100% animatie-naam: cssanim animatie-duur: 5s} @keyframes cssanim {0% {transform: schaal (0,5) dekking: 0} 50 % {transform: scale (1.5) dekking: 1} 100% {transform: scale (1)}}Nu, aangezien we duidelijk zijn over het definiëren van keyframes. Laten we de animatie-eigenschappen onderzoeken om te beschrijven hoe we onze elementen en objecten kunnen animeren. De twee eigenschappen, d.w.z. erven en initiaal, kunnen met alle animatietypen worden gebruikt. Deze eigenschappen worden over het algemeen samen met de div-tag gebruikt om verschillende gedragingen te vertonen.
eerste: Stelt deze eigenschap in op de standaardwaarde.
erven: Erft deze eigenschap van het bovenliggende element.
Animatie-eigenschappen
- animatie-naam
Het specificeert de naam van de animatie, die wordt gebruikt in de @keyframes om te manipuleren.De mogelijke waarden zijn:
- naam: Dit specificeert de naam die voor animatie aan het keyframe moet worden gekoppeld.
- geen: Dit is de standaardwaarde en kan worden gebruikt om de overgenomen of trapsgewijze animaties te overschrijven.
Syntaxis:
animatie-naam: naam | geen | eerste | erven
.anim {hoogte: 200px breedte: 200px achtergrond: lichtblauw positie: relatieve grensradius: 100% animatienaam: cssanim animatieduur: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- animatie-duur
Het specificeert de tijd die een animatie nodig heeft om één uitvoering te voltooien. Het wordt gedefinieerd in seconden of milliseconden (bijvoorbeeld 4s of 400ms). De standaardwaarde van deze eigenschap is 0s, dus als deze eigenschap niet is opgegeven, zal de animatie niet plaatsvinden.
Syntaxis:
animatie-duur: tijd
.anim {hoogte: 200px breedte: 200px achtergrond: blauw positie: relatieve grensradius: 100% animatienaam: cssanim animatieduur: 4s} @keyframes cssanim {0% {transform: scale (0.4) dekking: 0} 50 % {transform: scale (1.4) dekking: 1} 100% {transform: scale (1)}}- animatie-vertraging
Met de eigenschap animatie-vertraging kunnen we de vertraging in de animatie specificeren. Het bepaalt wanneer een animatiereeks wordt uitgevoerd.
De waarde van deze eigenschap kan worden gedeclareerd in seconden (s) of milliseconden (ms). Het kan zowel positieve als negatieve waarden bevatten. Een positieve waarde geeft aan dat de animatie zal starten nadat de opgegeven tijd is verstreken en tot die tijd unanimatie zal blijven. Aan de andere kant zal een negatieve waarde de animatie onmiddellijk starten vanaf het punt alsof deze al gedurende een opgegeven tijdsbestek wordt uitgevoerd.
Syntaxis:
animatie-vertraging: tijd
.anim {hoogte: 200px breedte: 200px achtergrond: lichtblauw positie: relatieve grensradius: 100% animatienaam: cssanim animatieduur: 4s animatie-vertraging: 4s} @keyframes cssanim {0% {left: 0px} 100% {left: 250px}}- animatie-iteratie-telling
Deze eigenschap geeft aan hoe vaak een animatiereeks moet worden afgespeeld. De standaardwaarde van deze eigenschap is 1.De mogelijke waarden zijn:
- aantal - geeft het aantal iteraties aan
- eindeloos - geeft aan dat de animatie voor altijd moet worden herhaald
Syntaxis:
animatie-iteratie-telling: aantal | eindeloos
.anim {hoogte: 200px breedte: 200px achtergrond: lichtblauw positie: relatieve grensradius: 100% animatienaam: cssanim animatieduur: 2s animatie-iteratie-aantal: 4} @keyframes cssanim {0% {left: 0px} 100% {resterend: 100px}}- animatie-richting
Het bepaalt de richting van de animatie. De richting van het element kan worden ingesteld om vooruit, achteruit of in afwisselende cycli te spelen.De standaardwaarde van deze eigenschap is normaal en wordt bij elke cyclus opnieuw ingesteld.De mogelijke waarden zijn:
normaal - Dit is het standaardgedrag en de animatie wordt voorwaarts afgespeeld. Na elke cyclus komt de animatie in de begintoestand en wordt opnieuw voorwaarts afgespeeld
converteer decimaal naar binair python
omgekeerde - De animatie wordt in achterwaartse richting afgespeeld. Na elke cyclus bereikt de animatie zijn eindtoestand en wordt achteruit afgespeeld
afwisselend - De richting van de animatie is omgekeerd, d.w.z. dat deze bij elke cyclus eerst vooruit en vervolgens achteruit wordt afgespeeld. Elke oneven cyclus geeft een voorwaartse animatie weer en elke even cyclus geeft een achterwaartse beweging weer.
alternate-reverse - De richting van de animatie wordt afwisselend omgekeerd. Hier wordt de animatie eerst achteruit afgespeeld en vervolgens bij elke cyclus vooruit. Elke oneven cyclus beweegt achteruit of achteruit en elke even cyclus geeft een voorwaartse animatie weer.
Syntaxis:
animatie-richting: normaal | omgekeerd |plaatsvervangend | alternate-reverse
.anim {hoogte: 200px breedte: 200px achtergrond: lichtblauw positie: relatieve grensradius: 100% animatienaam: cssanim animatieduur: 2s animatie-iteratie-aantal: oneindig} @keyframes cssanim {0% {left: 0px} 100% {resterend: 100px}}- animatie-timing-functie
Deze eigenschap bepaalt de snelheidscurve of de bewegingsstijl van animatie. Het is toegewezen om de verandering in de animatiestijl soepel van de ene vorm naar de andere te laten verlopen. Als er geen waarde is toegewezen, is deze standaard ingesteld op vereenvoudigen.De mogelijke waarden voor animatie-timing-functie zijn:
gemak - Dit is de standaardwaarde van het onroerend goed. Hier begint de animatie langzaam, wordt geleidelijk snel in het midden en eindigt dan weer langzaam.
lineair - De animatie behoudt dezelfde snelheid gedurende de cyclus, d.w.z. van begin tot eind.
gemak in - De animatie begint langzaam.
gemak - De animatie eindigt langzaam.
gemak-in-uit - De animatie beweegt langzaam, zowel tijdens het begin als het einde.
kubieke bezier (n, n, n, n) - Met deze geavanceerde functie kunnen we een aangepaste timingfunctie creëren door onze eigen waarden te definiëren. De mogelijke waarde varieert van 0 tot 1.
Syntaxis:
animatie-timing-functie: lineair | gemak | gemak | gemak in | gemak-in-uit |kubieke bezier (n, n, n, n)
.anim {hoogte: 200px breedte: 200px achtergrond: lichtblauw positie: relatieve grensradius: 100% animatienaam: cssanim animatieduur: 2s animatierichting: omgekeerd} @keyframes cssanim {0% {achtergrond: oranje links: 0px } 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}- animatie-fill-mode
Dit is een speciale eigenschap omdat het de animatiestijl bepaalt voordat of nadat de animatie wordt afgespeeld.Standaard wordt de stijl van het element niet beïnvloed door de animatie voor het begin of na het einde. Deze eigenschap is handig omdat het helpt bij het opheffen van dit standaardgedrag van de animatie.De volgende mogelijke waarden zijn voor de eigenschap animation-fill-mode:
geen - Dit is de standaardwaarde van de eigenschap, d.w.z. de animatiestijlen worden niet op het element toegepast, voor of na de animatie.
vooruit - De stijlen worden behouden door het element in de uiteindelijke animatiereeks, d.w.z. nadat de animatie is voltooid.
achteruit - De stijlen worden behouden door het element in de aanvankelijke animatiereeks, d.w.z. voordat de animatie wordt bekeken, vooral tijdens de animatievertraging.
beide - Dit betekent dat de animatie zowel in de richting zal volgen, d.w.z. vooruit en achteruit
Syntaxis:
animatie-vulmodus: geen | vooruit | achteruit | beide
.anim {breedte: 50 px hoogte: 50 px achtergrond: lichtblauw kleur: wit lettertype-gewicht: vet positie: relatieve animatienaam: cssanim animatieduur: 5s animatie-iteratie-telling: oneindige randradius: 100%} # anim1 { animatie-timing-functie: gemak} # anim2 {animatie-timing-functie: lineair} # anim3 {animatie-timing-functie: gemak-in} # anim4 {animatie-timing-functie: gemak-out} # anim5 {animatie- timing-functie: gemak-in-uit} @keyframes cssanim {van {left: 0px} tot {left: 400px}}- animatie-play-state
Deze eigenschap geeft aan dat een animatie wordt afgespeeld of gepauzeerd. Ook wanneer een animatie wordt hervat vanuit een pauze, begint deze waar hij is gebleven.De mogelijke waarden zijn:
- spelen - Om de animatie actief te maken
- pauzeerde - Om de animatie te pauzeren.
Syntaxis:
animatie-play-state: onderbroken | spelen
.anim {breedte: 100px hoogte: 100px achtergrond: lichtblauw positie: relatieve animatienaam: cssanim animatieduur: 3s animatie-vertraging: 2s animatie-vulmodus: achteruit grensradius: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animatie
Dit staat bekend als de animatie steno-eigenschap. Het wordt gebruikt voor schonere code. Als we eenmaal gewend zijn geraakt aan alle animatie-eigenschappen, is het raadzaam de animatie-afkorting te gebruiken om sneller te coderen en alle eigenschappen op één regel te definiëren.
Syntaxis:
animatie: [animatie-naam] | [animatieduur] | [animatie-timing-functie] |[animatie-vertraging] | [animatie-iteratie-telling] | [animatie-richting] |[animatie-fill-mode] | [animatie-afspeelstatus]
Alle animatie-effecten die we hierboven laten zien met behulp van verschillende animatie-eigenschappen, kunnen worden bereikt door de afkorting te gebruikenanimatie eigendom.
.anim {hoogte: 200px breedte: 200px achtergrond: lichtblauw positie: relatieve grensradius: 100% animatienaam: cssanim animatieduur: 2s animatie-richting: normale animatie-afspeelstatus: paused} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Hiermee zijn alle animatie-eigenschappen voltooid die in CSS kunnen worden gebruikt. We zouden verschillende variaties van deze eigenschappen moeten proberen om een duidelijker beeld te krijgen. Als we ons op ons gemak voelen, kan de steno-eigenschap van de animatie een grote hulp zijn om schonere en snellere code te schrijven. Dit is een van de belangrijkste vaardigheden die webontwikkelaars in CSS moeten leren. Omdat we de neiging hebben om ons meer op bewegende objecten te concentreren in plaats van op statische, kunnen animaties ons daarbij helpen en ook geweldige opmerkelijke webpagina's ontwikkelen.
Bekijk onze die wordt geleverd met live training onder leiding van een instructeur en real-life projectervaring. Deze training maakt je bedreven in vaardigheden om met back-end en front-end webtechnologieën te werken. Het omvat training over webontwikkeling, jQuery, Angular, NodeJS, ExpressJS en MongoDB.
Heeft u een vraag voor ons? Vermeld het in het commentaargedeelte van de blog 'Animaties in CSS' en we nemen zo spoedig mogelijk contact met u op.