Animaties op een webpagina kunnen meer gebruikers aantrekken. Stel uzelf de volgende vraag: als u een webpagina zou zien met behoorlijk wat animatie, zou u dan niet meer willen ontdekken? Nu kunt u met CSS-overgangen uw werk tot leven laten komen met een aantal geweldige animaties. En let wel, deze moeten goed worden gedaan. Laten we de wereld van CSS-overgangen in de volgende volgorde verkennen:
- Waarom CSS-overgangen?
- De overgangseigenschap
- Wat moet u specificeren?
- De Overgang-timing-functie Functie-eigenschap
- De eigenschap Transition-Delay
Waarom CSS-overgangen?
Laten we een voorbeeld nemen. Als u de kleur van een element zou veranderen van wit in blauw, is deze verandering vrijwel onmiddellijk. Voor een meer geanimeerd effect kunt u deze wijziging geleidelijk laten plaatsvinden. Dit ziet er ook visueel aantrekkelijk uit. Door CSS-overgangen in te schakelen, kunt u de manier waarop de wijzigingen plaatsvinden, aanpassen. U kunt bepalen hoe de veranderingen in elementen plaatsvinden op specifieke tijdsintervallen die een versnellingscurve volgen.
Met CSS-overgangen kunt u de wijzigingen voor elementen, de specifieke tijdsintervallen, de snelheid van de acceleratiecurve en nog veel meer. U kunt dit allemaal doen zonder Flash of te gebruiken JavaScript .
Voor een beter begrip kunt u de onderstaande afbeelding raadplegen:
In de bovenstaande afbeelding verandert het HTML-element binnen een seconde van rood in blauw. Je zult ook de tussenkleur zien wanneer de overgang plaatsvindt. Als u geen CSS-overgangen gaat gebruiken, zult u merken dat de kleurverandering van rood naar blauw onmiddellijk is - u zult de tussenliggende kleur niet zien. Met CSS-overgangen zult u een geanimeerd effect opmerken wanneer de HTML-elementen veranderen van de oude staat naar de nieuwe.
De overgangseigenschap
U kunt de eigenschap shorthand transition gebruiken om CSS-overgangen te beheren. Het gebruik van deze afkorting is niet alleen eenvoudig, maar het kan ook niet-synchrone parameters vermijden die behoorlijk frustrerend kunnen zijn om te debuggen in CSS.
De transitie-eigenschap specificeert de CSS-eigenschappen waarnaar u het overgangseffect wilt. Alleen deze CSS-eigenschappen zijn geanimeerd.
Syntaxis:
overgang:
Als beginner kunt u problemen ondervinden bij het gebruik van de steno. Als u denkt dat het gebruik van de afkorting momenteel een beetje ingewikkeld voor u is, kunt u de overgangseigenschappen afzonderlijk specificeren. Voor een HTML-element kunt u de overgangseigenschappen een voor een specificeren, zoals weergegeven in het onderstaande voorbeeld:
div {breedte: 100px hoogte: 100px achtergrond: lichtblauw overgangseigenschap: breedte overgangsduur: 2s overgang-timing-functie: lineaire overgangsvertraging: 1s} div: hover {breedte: 300px}Beweeg over de doos
In het bovenstaande voorbeeld hebben we de eigenschappen (overgangseigenschap, overgangsduur, overgangstimingfunctie en overgangsvertraging) en hun waarden afzonderlijk gespecificeerd. We zullen binnenkort over deze overgangseigenschappen leren.
Wat moet u specificeren?
Er zijn in de eerste plaats twee dingen die u moet specificeren om CSS-overgangen te maken: de CSS-eigenschap waaraan u een effect wilt toevoegen en de tijdsduur van dat effect.U moet één ding in gedachten houden: als u de tijdsduur niet specificeert, krijgt de overgang de standaardwaarde 0 , en er zal geen enkel effect zijn.
Laten we een voorbeeld bekijken:
De onderstaande code definieert een overgangseffect van de eigenschap width voor een duur van vijf seconden.
div {breedte: 100 px hoogte: 100 px achtergrond: blauw overgang: breedte 5 seconden} div: hover {breedte: 600 px}Beweeg de cursor over het div-element hierboven om het overgangseffect te zien.
In de bovenstaande code zult u zien dat wanneer u uw cursor over het blauwe vak beweegt, het blauwe vak geleidelijk in breedte toeneemt gedurende een tijdsduur van vijf seconden. U zult ook opmerken dat wanneer u de cursor uit het blauwe vak verwijdert, het blauwe vak geleidelijk (niet onmiddellijk) terugkeert naar zijn oorspronkelijke grootte. U kunt ook de waarden voor breedte en tijdsduur wijzigen om te zien hoe deze overgangseigenschap het HTML-element beïnvloedt.
U kunt het overgangseffect ook aan meer dan één eigenschap toevoegen. U kunt dit doen door komma's te gebruiken om de eigenschappen te scheiden. Laten we een voorbeeld bekijken:
In de onderstaande code is de transitie-eigenschap gespecificeerd voor breedte, hoogte en transformatie.
div {opvulling: 15px breedte: 150px hoogte: 100px achtergrond: groen overgang: breedte 2s, hoogte 2s, transform 2s} div: hover {breedte: 300px hoogte: 200px transform: roteren (360deg)} Hallo Wereld (Beweeg over mij)
Met het bovenstaande voorbeeld ziet u hoe het groene vak beweegt wanneer u over het vak zweeft.
We hebben alleen het pand en de tijdsduur gespecificeerd. Laten we de andere parameters bekijken met verschillende voorbeelden.
De Overgang-timing-functie Functie-eigenschap
Deze eigenschap definieert de snelheidscurve voor het overgangseffect. Het kan de volgende waarden aannemen:
- Gemak waarde: Dit is de standaardwaarde waarbij het effect in het begin langzaam is, dan sneller en langzaam eindigt.
- Lineaire waarde: Dit effect verandert de snelheid van de overgang niet - het houdt de snelheid van begin tot eind constant.
- Gemakkelijke waarde: Dit effect begint langzaam.
- Ease-out waarde: Dit effect heeft een langzaam einde.
- Ease-in-out waarde: Dit effect heeft zowel een langzame start als een langzaam einde.
- Cubic-bezier-waarde (n, n, n, n): U kunt uw eigen set waarden specificeren in de cubic-bezier-functie.
De onderstaande code toont de overgangseffecten voor lineaire, gemak, gemak-in, gemak-out en gemakkelijk-in-uit waarden.
div {breedte: 100px hoogte: 100px achtergrond: roze overgang: breedte 2s} # div1 {overgang-timing-functie: lineair} # div2 {overgang-timing-functie: gemak} # div3 {overgang-timing-functie: gemak-in } # div4 {transitie-timing-functie: gemak-out} # div5 {transitie-timing-functie: gemak-in-uit} div: hover {breedte: 300px}Plaats de muisaanwijzer op de div-elementen hieronder
lineair
gemak
gemak in
gemak
gemak-in-uit
De eigenschap Transition-Delay
Soms wilt u dat een animatie na een bepaalde tijdsduur plaatsvindt. Met de eigenschap transition-delay kunt u de vertraging voor een overgangseffect specificeren. U kunt de vertraging in seconden specificeren.
Laten we een voorbeeld nemen om de vertraging in het overgangseffect te bekijken:
div {breedte: 100px hoogte: 100px achtergrond: geel overgang: breedte 3s overgangsvertraging: 1s} div: hover {breedte: 300px}Plaats de muisaanwijzer op het div-element hieronder
Opmerking: Je kunt die vertraging van 1 seconde zien voordat het effect begint
Als u in de bovenstaande code met uw cursor over het gele vak beweegt, merkt u (gedurende één seconde) dat er geen effect is. Na een seconde wachten, merkt u het effect.
Hiermee komen we aan het einde van dit CSS Transitions-artikel. U kunt nu animaties aan uw webpagina's toevoegen. Probeer deze voorbeelden eens uit.
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 te werken met back-end en front-end webtechnologieën. Het omvat training over webontwikkeling, jQuery, Angular, NodeJS, ExpressJS en MongoDB.
Heeft u een vraag voor ons? Vermeld het alstublieft in het commentaargedeelte van de 'CSS Transition' -blog en we nemen zo spoedig mogelijk contact met u op.
print_r naar string