Share
Naarmate CSS3 op het web verschijnt, brengt het een aantal interessante nieuwe presentatietechnieken met zich mee. Vandaag bespreken we de basis van het gebruik van CSS3-overgangen en -animaties om een extra laag polish toe te voegen.
Deze tutorial bevat een screencast die beschikbaar is voor leden van Tuts + Premium.
Om te beginnen werken we met enkele basistechnieken: ten eerste een eenvoudige wijziging van de tekstkleur wanneer een gebruiker over een bepaald element zweeft.
een kleur: # 000; a: hover color: # f00;
Hier veranderen we de tekstkleur in rood bij zweven. Nu, met een beetje CSS3, kunnen we een veel gladder uiterlijk creëren door de kleur geleidelijk te vervagen.
een kleur: # 000; -webkit-overgang: kleur 1s gemak-in; a: hover color: # f00;
We hebben de CSS-eigenschap, -webkit-overgang toegevoegd. Merk op dat de -webkit-prefix aangeeft dat dit alleen werkt in Webkit-engines of Safari en Chrome. Gelukkig hebben ook andere moderne browsers hun eigen implementaties. Een volledige verklaring voor alle browsers ziet er ongeveer als volgt uit:
een kleur: # 000; -webkit-overgang: kleur 1s gemak-in; -moz-overgang: kleur 1s gemak-in; -o-overgang: kleur 1s gemak-in; overgang: kleur 1s gemak-in;
Houd er rekening mee dat we voor deze zelfstudie exclusief focussen op de implementatie van de webkit. Na de aangifte van het onroerend goed hebben we de waarden "kleur 1s gemak". Dit is de verkorte verklaring; de drie waarden vertegenwoordigen:
In dit geval gaan we over met gemak, waardoor de overgang langzaam begint en de overgang wordt versneld.
Een ander basisgebruik van veranderende statussen is het wijzigen van de achtergrond van een invoervak waarop wordt scherpgesteld.
input.ourInputBox: focus -webkit-transition: background-color 0.5s linear; achtergrond: #CCC;
Deze keer plaatsen we de transitieverklaring in de hover-status, zodat we geen extra onnodige klassen aan de CSS toevoegen. We passen de overgang toe zodra het invoervak de focus verwerft.
CSS-overgangen zijn eigenlijk relatief eenvoudig om toe te voegen aan bestaande hover-functionaliteit, en geven uw site extra glans voor browsers die CSS3 ondersteunen.
Om een stap verder te gaan, kunnen we ook meerdere CSS-eigenschappen overzetten met behulp van de lange-handsversies van de CSS3-overgang.
a.thebg color: # 000; background: # f00; padding: 5px; -webkit-border-radius: 5px; -webkit-transition-eigenschap: kleur, achtergrond; -webkit-overgang-duur: 1s, 1s; -webkit-overgang-timing-functie: lineair, gemak-in; a.thebg: hover color: # f00; achtergrond: # 000;
Deze keer veranderen de achtergrondkleur en de tekstkleur tijdens de zweeftekst, zodat we beide eigenschappen met onze overgang kunnen targeten. We splitsen eenvoudig de overgang: eerst hebben we -webkit-transition-property en scheiden we de verschillende waarden met een komma. Dus richten we ons op respectievelijk de kleur- en achtergrondeigenschappen.
-webkit-transition-property: kleur, achtergrond;
Vervolgens stellen we de duur van de overgang in met behulp van:
-webkit-overgangsduur: 1s, 1s;
Hiernaar wordt verwezen in dezelfde volgorde als de eerste stelling; deze keer echter zijn beide waarden ingesteld op 1s.
Ten slotte stellen we de timingfunctie in en stellen we twee verschillende waarden in: de eerste, lineaire, heeft betrekking op onze eerste gedeclareerde variabele - kleur; en de tweede heeft betrekking op de variabele achtergrond.
Dus we hebben de kleur ingesteld op een lineaire verandering van meer dan een seconde en de achtergrond om in te zoomen over diezelfde periode.
CSS3-overgangen beginnen beter tot hun recht te komen wanneer ze worden gecombineerd met andere nieuwe CSS-eigenschappen.
U kunt voorbeelden van overlappende elementen en overgangen op Andy Clarke's For a Beautiful Web bekijken.
Laten we een eenvoudig voorbeeld van het animeren van een pop-outbord maken.
We maken eerst het selectiekader voor de wegwijzer en geven deze een relatieve positioneringscontext om ervoor te zorgen dat we items absoluut erin kunnen positioneren.
#signpost width: 60px; Hoogte: 196px; position: relative;
Nu plaatsen we de doos op de pagina en plaatsen de stukjes van ons teken erin.
Vervolgens wordt de post gepositioneerd met een z-index van twee, om deze bovenop het bord te plaatsen.
#post width: 79px; Hoogte: 196px; z-index: 2; position: relative;
Nu voegen we het teken onder de post toe en roteren het met de CSS3-transform-eigenschap.
#sign height: 46px; width: 80px; positie: absoluut; top 10; Links: 60; -webkit-transform-origin: 0 0; -webkit-transform: roteren (86 graden); z-index: 1; -webkit-transitie: -webkit-transform 0,5s easy-in-out;
Het teken wordt geroteerd met behulp van -webkit-transform: roteer (86 graden) en bevindt zich onder de paal. Om ervoor te zorgen dat het bord rond het juiste punt draait, moeten we het wijzigen oorsprong transformeren naar de linkerbovenhoek: 0, 0.
We hebben de overgang ingesteld om de eigenschap -webkit-transform over 0,5s te wijzigen met een gemakkelijk-in-uit-profiel en bij zweven roteren we het teken terug naar zijn oorspronkelijke oriëntatie.
#signpost: hover #sign -webkit-transform: rotate (0deg);
We doen dit op de # -signpost: hover in plaats van op de zweeftekst van de # sign zelf.
We kunnen dit allemaal samen binden, met behulp van webkit-animaties, die ons de kracht geven om dingen uit te voeren zoals continue rotatie.
We beginnen met het maken van twee cirkelafbeeldingen en plaatsen deze in een bevattende div - zoals we deden met de wegwijzer hierboven.
#circles width: 180px; Hoogte: 180px; position: relative; .outercircle width: 180px; Hoogte: 180px; positie: absoluut; z-index: 1; top: 0: links: 0; .middlecircle width: 90px; hoogte: 90px; positie: absoluut; z-index: 3; top: 45px; left: 45px;
Nu moeten we de animaties definiëren; we zullen de cirkels in tegengestelde richting laten draaien, dus we moeten twee animaties instellen.
@ -webkit-keyframes spin van -webkit-transform: roteren (0deg); naar -webkit-transform: roteren (360 graden); @ -webkit-keyframes spinrev van -webkit-transform: rotate (0deg); naar -webkit-transform: roteren (-360deg);
De animatie krijgt een naam ter referentie, in dit geval "spin" en "spinrev." Vervolgens wijzen we ze toe naar en van waarde; dus we roteren het beeld van 0 graden naar 360 graden met behulp van webkit-transformatie en naar -360 voor het omgekeerde.
Nu kennen we deze animatie toe aan de zweeftoestanden. Merk op dat, als we het aan de normale status hebben toegewezen, de animatie meteen zou worden uitgevoerd als de pagina is geladen.
#circles: hover .outercircle -webkit-animation-name: spin; -webkit-animatie-iteratie-telling: oneindig; -webkit-animatie-timing-functie: lineair; -webkit-animatie-duur: 10s; #circles: hover .middlecircle -webkit-animation-name: spinrev; -webkit-animatie-iteratie-telling: oneindig; -webkit-animatie-timing-functie: lineair; -webkit-animatie-duur: 5s;
We verwijzen naar de animatienaam die we eerder hebben gemaakt (-webkit-animation-name: spin;). Vervolgens geven we het aantal keren aan dat we de animatie willen uitvoeren (-webkit-animatie-iteratie-aantal: oneindig;). In dit geval zal oneindig het blijven ronddraaien terwijl de #circles div op de plaats blijft.
Vervolgens stellen we de timingfunctie in (-webkit-animation-timing-function: linear;) en ten slotte stellen we een duur in voor elke iteratie - in dit geval is het tien seconden (-webkit-animation-duration: 10s) ;), en vijf voor een volledige revolutie.
Zodra alles werkt, moeten we rekening houden met onze gebruikers die browsen zonder CSS3-geschikte webbrowser. Dit kan eenvoudig worden gedaan met behulp van een JavaScript-bibliotheek zoals Modernizr, die klassen toevoegt aan het HTML-element met betrekking tot de browsermogelijkheden.
Met behulp van het bovenstaande voorbeeld van een signpost plaatsen browsers die geen CSS-transformaties ondersteunen het bord niet correct onder het bericht; dus we kunnen deze browsers targeten en het bord gewoon verbergen totdat het wordt omgedraaid.
.no-csstransforms #signpost #sign display: none; .no-csstransforms #signpost: hover #sign display: block;
Het is zo simpel als koppelen aan het Modernizr-script, het vinden van de juiste klassenaam en vervolgens een aparte CSS-instructie voor die instantie maken.
Dat is het voor nu. Ik hoop dat je het leuk vond! Laat het me weten als je nog vragen of opmerkingen hebt!
Accentsconagua