Goed gebruik maken van CSS3-animaties: zelfstudie, voorbeeldcodes en voorbeelden

Wanneer we JS en jQuery gebruiken, hebben we volledige controle over de animaties en kunnen we geweldige effecten creëren, maar de prijs is vrij hoog. Verwerkingstijd, compatibiliteit tussen browsers (mobiele apparaten zijn bijvoorbeeld heel anders als het gaat om JS) en de complexiteit van de code zelf zijn punten waar we rekening mee moeten houden bij het maken van geanimeerde interfaces.


Dus vandaag zullen we zien hoe we JS kunnen vermijden door CSS-animaties en overgangen te gebruiken. We bespreken de basisstappen en enkele geweldige effecten, zoals accordeonpanelen en geanimeerde submenu’s.

Pak een stoel, een notitieblok en een echte browser (alles behalve IE) en laten we beginnen.

Opwarmen

We hebben nogal wat voordelen (en nadelen zoals alles in ons leven) bij het gebruik van CSS-animaties. Als u die aan uw baas of klant moet verkopen, moet u hier rekening mee houden:

  • Ze zijn potentieel sneller, omdat ze gebruik kunnen maken van hardwareversnelling (als HTML5-implementaties)
  • Ze presteren beter op mobiele apparaten en hebben geen specifieke code nodig om aanraakgebeurtenissen bij te houden
  • JS moet door de browser worden geïnterpreteerd en de mogelijkheden om de browser te doorbreken zijn veel groter. Dus als CSS mislukt, mislukt het stil terwijl JS de hele pagina kan breken
  • Ze hebben een redelijk goede browserondersteuning (deze site zal je helpen om specifieke statistieken hierover te controleren: http://caniuse.com/#search)

Voorbeelden van CSS3-animaties

Voordat we beginnen met het vlees van dit bericht, laten we eens kijken naar enkele prachtige animaties gemaakt in pure CSS.

Pure CSS Twitter Fail Whale

Geanimeerde mislukte walvis

 Gemaakt door Steven Dennis, zie dit in actie.

Pure CSS Scrolling Coke Can
CSS 3 Animatievoorbeelden: Scrolling Coke Can

Gemaakt door Roman Cortes, zie dit in actie.

Pure CSS Walking Man

CSS 3 Animatievoorbeelden: The Walking Man

 Gemaakt door Andrew Hoyer, zie dit in actie.

Je handen vuil maken

Laten we de code starten. We gebruiken veel CSS-pseudoklassen om de animatie te activeren. Om eerlijk te zijn, raden veel ontwikkelaars je aan om JS te gebruiken om animaties te activeren en deactiveren, maar hier zien we de eenvoudigere manier:

#test {
achtergrond: rood;
}
#test: hover {
achtergrond: groen;
}
#test: active {
achtergrond: blauw;
}
#test: target {
achtergrond: zwart;
}

We hebben een paar andere pseudoklassen om te gebruiken, maar je hebt het idee! Dit is dus wat er gebeurt als u op het # test-element klikt (ervan uitgaande dat het een link is):

  • Normale staat: achtergrond is rood
  • Hover: wanneer de muis het elementgebied binnengaat, heeft deze een groene achtergrond
  • Actief: wanneer u op de cursor klikt en de muisknop nog steeds wordt ingedrukt, is de achtergrondkleur blauw
  • Doel: wanneer de huidige pagina de #test in de URL heeft, is dit element zwart

Elk van deze kan worden gebruikt voor CSS-animaties, u kunt bijvoorbeeld 2 links maken om de CSS-animatie te activeren en deactiveren met behulp van het doelpseudo-element met deze code:

activeren
deactiveren

CSS-overgangen

CSS-overgang verandert soepel van de begin- naar de eindtoestand. U definieert dus in de hoofdkiezer met behulp van de eigenschap ‘overgang’ de tijd en elke eigenschap die wordt beïnvloed en hoe de animatie zou moeten zijn. Laten we een voorbeeld bekijken:

.test {
/ * overgang-eigenschap duur timing-functie, * /
kleur blauw;
overgang: kleur 2s, lettergrootte 2s gemak;
}
.test: hover {
kleur rood;
}
.test: actief {
lettergrootte: 200%;
}

Wanneer je het .test-element beweegt, verandert de kleur geleidelijk van blauw in rood (wat een mooi palet, hè?). Wanneer u op het element klikt, wordt de lettergrootte geleidelijk verhoogd tot 200% van de standaardlettergrootte.

We hebben ook de eigenschap “overgangstijdstip”, ingesteld als gemak, dat de “beschikbare tijd” voor de animatie zal worden besteed. Dit zijn de mogelijke waarden:

  • Lineair: dezelfde snelheid van begin tot einde
  • Gemak: Langzame start
  • Gemak: langzaam einde
  • Gemak: Langzame start, snel in het midden en dan langzaam
  • Ease-in-out: langzame start, langzaam einde
  • Cubic-bezier (a, b, c, d): aangepaste snelheid

De kubieke Bezier-functie maakt een aangepaste animatie met 4 getallen die varieert van 0 tot 1, wat de wiskundige curve vertegenwoordigt voor animatiesnelheid X duur.

Voor een betere browsercompatibiliteit zou je moeten overwegen om de leveranciersvoorvoegsels voor opera, Firefox en webkit als volgt te gebruiken:

div {
breedte: 400px;
-o-overgang: breedte 2s;
-moz-overgang: breedte 2s;
-webkit-overgang: breedte 2s;
overgang: breedte 2s;
}

U kunt ook gebruikmaken van de mediaquery’s om verschillende overgangen te definiëren, afhankelijk van de browserbreedte (mobiele apparaten, tablets). Dit is een simpel voorbeeld:

lichaam {
lettergrootte: 1em;
}
@media-scherm en (max-width: 800px) {
lichaam {
lettergrootte: 0.8em;
}
}
@media-scherm en (max. breedte: 400px) {
lichaam {
Lettergrootte: 0.7em;
}
}

Hier wordt de lettergrootte plotseling gewijzigd wanneer u de browserbreedte vergroot. Deze code voorkomt dat dit gebeurt en geeft een veel soepelere overgang:

lichaam {
-o-overgang: lettergrootte .5s lineair;
-moz-overgang: lettergrootte .5s lineair;
-webkit-overgang: lettergrootte .5s lineair;
overgang: lettergrootte .5s lineair;
}

U kunt dit ook gebruiken als u verschillende weergaven of formaten heeft voor portret / landschap, als u de breedte, kleuren, opvullingen, menuweergave wilt wijzigen.

CSS-animatie – Het echte plezier begint

De animatie is een reeks overgangen die in een enkele selector zijn gedefinieerd. Om CSS-animaties te definiëren, moet je twee stappen volgen.

De @keyframe-regel wordt gebruikt om een ​​reeks animatiestappen te definiëren en wordt gedefinieerd door een unieke naam en de stijlen die beschrijven hoe deze animatie werkt. Zoals gewoonlijk hebben we een aantal leveranciersvoorvoegsels nodig, zoals in dit voorbeeld:

/ * dezelfde code voor elke leverancier * /
@ -o-keyframe mijn-animatie { …
@ -moz-keyframe mijn-animatie { …
@ -webkit-keyframe mijn-animatie { …
/ * animatienaam * /
@keyframe mijn-animatie {
/ * kaderselector * /
0% {
/ * framestijl * /
Links: 0px;
Boven: 0px;
}
25% {
Links: 200px;
Boven: 0px;
}
50% {
Links: 200px;
Boven: 200 px;
}
75% {
Links: 0px;
Boven: 200 px;
}
100% {
Links: 0px;
Boven: 0px;
}
}

Elke stijl wordt dus gedefinieerd door het frame / tijdframe (zoals die frames uit een flash-animatie) als een percentage en de stijlen die daar moeten worden toegepast. Dit keyframe zegt bijvoorbeeld dat het element naar links, dan naar boven, dan naar rechts en dan naar beneden gaat.

Nadat je stap 1 hebt gevolgd en je keyframe hebt gemaakt, kun je het daadwerkelijk op een element toepassen. Dan gebruiken we vrijwel dezelfde logica als we hebben gedaan met de CSS-overgang, het verschil is dat onze “overgang” nu een veel complexe animatie is.

Om het toe te passen, gebruiken we de animatie-eigenschap en deze heeft zeven subeigenschappen:

  • Naam: die unieke identificatie
  • Duur: hoe lang duurt het van 0% tot 100%
  • Timing-functie: vrijwel hetzelfde als de transitie timing-functie
  • Vertraging: hoe lang duurt het om de 0% te starten
  • Iteratietelling: hoeveel herhalingen zullen we hebben (‘oneindig’ voor een oneindige lus)
  • Richting: normaal of alternatief (achteruit)
  • Afspeelstatus: als de animatie wordt uitgevoerd of is onderbroken

Hiermee wordt onze animatie toegepast op het #test-element wanneer dit het doel van de pagina is:

#test: target {
/ * animatie-naam | duur | timing-functie | vertraging | iteratietelling | richting | speeltoestand * /
animatie: mijn-animatie 10s lineaire 0s oneindig normaal hardlopen;
}

Met dit in gedachten kunnen we een paar geweldige voorbeelden maken.

Alleen CSS-accordeon

We maken inklapbare panelen die gebruikmaken van de CSS-animaties. Hier is de basis HTML-structuur:

Tabblad 1

TEKST 1

Tabblad 2

TEKST 2

Tabblad 3

TEKST 3

Hiermee worden alleen de panelen gemaakt en de link waarmee ze allemaal worden geactiveerd. En hier gebeurt de magie:

/ * elke div die zich in de accordeon bevindt * /
.accordeon div {
/ * is standaard verborgen * /
hoogte: 0;
overloop verborgen;
/ * de zwarte magie * /
overgang: hoogte 1s;
}
/ * wanneer de genoemde div het doel is * /
.accordeon div: target {
/ * height: auto werkt niet, maar dit werkt prima * /
hoogte: 80px;
}

Vrij eenvoudig, hè? En je hebt je hele leven JS hiervoor gebruikt? :)

CSS Only Menu met submenu’s

En dit is weer een vrij eenvoudige toepassing. U heeft zeker een navigatiemenu op uw site en vaak moeten we daar een aantal submenu’s gebruiken. De beste manier om items te tonen en te verbergen is door jQuery te gebruiken, toch? Denk nog eens goed na nadat je deze code hebt getest:

  • Item 1
    • Punt 1.1
    • Punt 1.2
  • Punt 2
    • Punt 2.1
    • Rubriek 2.2

En de tovenarij begint hier:

een {
/ * alleen de links een tikkeltje beter maken * /
display: blok;
opvulling: 4px;
}
nav {
text-align: center;
}
/ * elk menu (inclusief het hoofdmenu) * /
nav ul {
display: inline-block;
lijststijl: geen;
}
nav>ul>li {
/ * horizontale items (verticaal werkt ook prima) * /
drijven: links;
}
nav li div {
/ * een submenu inklappen * /
hoogte: 0;
overloop verborgen;
/ * Houdini-gevoelens * /
overgang: hoogte 1s;
}
nav li: zweven>div {
hoogte: 56px;
}

Opsommen

Dit is zeker slechts een beknopte handleiding. Er zijn veel andere coole effecten die kunnen worden gedaan met alleen CSS-animaties en er zullen nog veel dingen komen.

Dus, heb je dit eerder gebruikt? Kun je een andere goede applicatie bedenken voor CSS-animaties? Deel uw mening met behulp van de opmerkingen!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map