Hallo beste lezers. Laten we het op deze dag hebben over, zo ongeveer, interessant ding zoals CSS-animatie. Dat wil zeggen, deze animatie van elementen wordt alleen gedaan met behulp van stijlen en er worden hier geen scripts gebruikt.
Zoals je kunt zien, is er hier een attribuut : zweven die de achtergrondstijl verandert bij zweven, in sommige voorbeelden zou dit vereist moeten zijn.
Vloeiende kleurverandering van elementen bij zweven met overgang
# doos1 (
marge-onder: 5px;
achtergrondkleur: #ccc;opvulling: 10px;
tekst uitlijnen: midden;
breedte: 200px;
hoogte: 100px;tekst-inspringing: 0px;
rand: 1px effen # 888;
-moz-overgang: achtergrondkleur 0,8s 0,1s gemak;
-o-overgang: achtergrondkleur 0,8s 0,1s gemak;
-webkit-overgang: achtergrondkleur 0,8s 0,1s gemak;
cursor: aanwijzer ;)# doos1 : zweven {
achtergrondkleur: # 97CE68;
kleur: # 333;
}
Zoals je kunt zien, hebben we deze animatie gemaakt met behulp van het attribuut overgang... Hier kunt u de animatiesnelheid in seconden wijzigen, in in dit geval kost 0,8 s totdat de kleur volledig verandert bij zweven en 0,1 s voordat de animatie begint na zweven en het verplaatsen van de cursor. (Sorry voor de puzzel :-)) Deze waarde kan naar behoefte worden gewijzigd.
De achtergrondkleur bij de muisaanwijzer is ingesteld als een attribuut : zweven, is hier vereist, anders werkt de animatie niet.
Het formaat van een element wijzigen
# doos2 (
marge-onder: 5px;
achtergrondkleur: #ccc;
kleur: # 333;opvulling: 10px;
tekst uitlijnen: midden;
breedte: 200px;
hoogte: 100px;tekst-inspringing: 0px;
rand: 1px effen # 888;
-moz-overgang: alle 1s lineair;
-o-overgang: alle 1s lineair;
-webkit-overgang: alle 1s lineair;
cursor: aanwijzer ;)# doos2 : zweven {
achtergrondkleur: # 97CE68;
kleur: # 000;
breedte: 150px;
hoogte: 50px;
}
In dit voorbeeld hebben we een soepele aanpassing van de grootte van het blok bij het zweven bereikt. De standaardmagnitude is 200x100 en de zweefmagnitude is 150x50, wat wordt gespecificeerd door het attribuut : zweven.
Hier kunt u het blok ook alleen in de breedte of hoogte wijzigen, u hoeft alleen maar : zweven verwijderen breedte:- het blok verandert alleen in hoogte, hoogte:- het blok verandert alleen in de breedte.
U kunt ook het wijzigingspercentage wijzigen. In dit geval is dat 1s.
Het object draaien
# doos3 (
marge-onder: 5px;
achtergrondkleur: #ccc;
kleur: # 333;opvulling: 10px;
tekst uitlijnen: midden;
breedte: 200px;
hoogte: 100px;tekst-inspringing: 0px;
rand: 1px effen # 888;
-moz-overgang: alle 1s 0.1s gemak;
-o-overgang: alle 1s 0.1s gemak-in;
-webkit-overgang: alle 1s 0.1s gemak;
cursor: aanwijzer ;)# box3: zweven (
achtergrondkleur: # 97CE68;
kleur: # 000;
-webkit-transform: roteren (360deg);
-moz-transform: roteren (360deg);
-o-transformatie: roteren (360deg);
}
Draaien vindt plaats met behulp van transformeren en overgang... In dit geval draait het object 360 graden met de klok mee met een snelheid van één seconde. Als u wilt dat het blok tegen de klok in draait, transformeren de waarde moet worden gezet - (min). Uiteraard kan de mate van rotatie worden gewijzigd.
Zoom soepel in en uit op een object
# doos4 (
marge-onder: 5px;
achtergrondkleur: #ccc;
kleur: # 333;
opvulling: 10px;
tekst uitlijnen: midden;
breedte: 200px;
hoogte: 100px;tekst-inspringing: 0px;
rand: 1px effen # 888;
-moz-overgang: alle 3s gemak-out;
-o-overgang: alle 3s gemak-out;
-webkit-overgang: alle 3s gemak-out;
cursor: aanwijzer ;)# box4: zweven (
achtergrondkleur: # 97CE68;
kleur: # 000;
-webkit-transform: schaal (2);
-moz-transform: schaal (2);
-o-transformatie: schaal (2);
}
In dit voorbeeld wordt het blok soepel verdubbeld. Deze waarde is zichtbaar transformeren: schaal (2)... Als u de waarde instelt op respectievelijk 1,5, is de blokverhoging 1,5 keer.
Op dezelfde manier kunt u: verkleinen blok, zet bijvoorbeeld de waarde 0,5.
Soepele blokverschuiving naar beneden
# doos5 (
marge-onder: 5px;
achtergrondkleur: #ccc;
kleur: # 333;
opvulling: 10px;
tekst uitlijnen: midden;
breedte: 200px;
hoogte: 100px;tekst-inspringing: 0px;
rand: 1px effen # 888;
-moz-overgang: alle 1s gemak-in-uit;
-o-overgang: alle 1s gemak-in-uit;
-webkit-overgang: alle 1s gemak-in-out;
cursor: aanwijzer ;)# box5: zweven (
achtergrondkleur: # 97CE68;
kleur: # 000;
-webkit-transform: vertalen (0,50px);
-moz-transform: vertalen (0,50px);
-o-transform: vertalen (0,50px);
}
Hier wordt de beweging gegeven in pixels. In dit geval (0,50px). Je kunt het blok ook omhoog laten gaan met deze waarde van 0, -50px. Of diagonaal naar beneden 50px, 50px. In één woord, het blok kan overal worden verplaatst.
Dat is eigenlijk alles wat ik wilde zeggen. Nee, niet allemaal :-) Vergeten u eraan te herinneren dat deze CSS-animatie kan worden toegepast op elk object op de site: afbeeldingen, tekst, titels, pictogrammen, enz. Voor schakels is een vloeiende kleurverandering perfect, naar mijn mening erg mooi. :-)
En toch werd deze informatie met ons gedeeld door de site shpargalkablog.ru. Waarvoor veel dank aan hem.
Nu is dat alles zeker :-) Tot snel, vrienden.
Deze collectie bevat de beste en hoogste kwaliteit CSS-chips. Hier vindt u verschillende en verbazingwekkende demo's en technieken van beroemde lay-outontwerpers en ontwerpers die proberen te bewijzen dat het nu mogelijk is om bijna alles alleen op pure CSS... Ook vind je hier verschillende lessen waarin uitgebreid wordt beschreven hoe je zo'n creatie maakt. Ik hoop dat deze verzameling nuttig voor u zal zijn.
CSS 3D-wolken
In deze demo kun je mooie wolken maken en bewerken in 3D. Deze CSS clouds maken ons duidelijk dat de mogelijkheden van webtechnologieën bijna eindeloos zijn.
Pure CSS-logo's
Dit zijn voorbeelden van logo's die alleen in pure CSS zijn gemaakt. Denk maar aan, er werden geen afbeeldingen gebruikt bij de creatie. Het is gewoon iets.
Alfabet met CSS-animatie
Een geweldig en artistiek voorbeeld van het gebruik van CSS in het alfabet
3D-navigatie voor de site
Eenvoudige maar zeer stijlvolle navigatiebalk voor een website, natuurlijk gemaakt met alleen CSS3. geen afbeeldingen of scripts.
Google Doodle met CSS
Een van de vele doodles van google zoekmachine gemaakt in CSS. Dit is een geweldig voorbeeld kwaliteitsgebruik CSS-animaties
Schuifregelaar
Een goed gemaakte slider voor foto's. Plus 4 voorbeelden in de demo.
Dubbele geanimeerde ring
Leuke animatie en kleurrijke ring met niet veel CSS-code
Vervagen op CSS
Het lijkt me erg gewenste filter, vooral omdat het is gemaakt met pure CSS. met vervaging kunt u de aandacht van de gebruiker op een bepaald punt vestigen.
De definitieve gids voor Flexbox
Dit artikel gaat over responsief Flexbox-blokken... Het vertelt volledig over deze blokken, hoewel het artikel in het Engels is.
Kleurrijk en geanimeerd CSS3-menu
Leuk dropdown menu voor de site met iconen. Een groot pluspunt is dat het volledig in CSS is gedaan.
CSS-filters
Engels kwaliteitsmateriaal over het toepassen van CSS-filters op afbeeldingen.
CSS-vormen
Post over CSS-formulieren met talloze voorbeelden
CSS-voortgangsbalken
Een les over het maken van stijlvolle voortgangsbalken met pure CSS en animatie. U kunt ook een voorbeeld bekijken en de bronnen downloaden.
Animatie - Animate.css
Meest populair project CSS-animaties op internet vandaag. En waarschijnlijk de eenvoudigste en hoogste kwaliteit, en ook gratis.
Laadindicatoren - Spinkit
Om eerlijk te zijn, deze indicatoren zijn al ontmoet op de blog, maar het lijkt me dat ze nog een keer aan je moeten worden getoond. Dit zijn namelijk de mooiste CSS-indicatoren op internet.
Toetsen
Nu de knoppen aan CSS al moeilijk te verrassen, maar het is een behoorlijk goede optie
Generator voor het maken van schakelaars
Klein en internet van hoge kwaliteit applicatie waarmee je prachtige schakelaars kunt maken voor gebruik op de site.
Knopinfo
Gratis tooltip CSS-bibliotheek - Hint.css
Kleurenschema's
Kleurenschema's voor mensen die niet graag door code spitten
| 18.02.2016
CSS3 wordt geopend onbeperkte mogelijkheden vóór UI-ontwerpers, en het belangrijkste pluspunt is dat bijna elk idee eenvoudig kan worden geïmplementeerd en geïmplementeerd zonder toevlucht te nemen tot JavaScript.
Het is verbazingwekkend hoe eenvoudige dingen een gewone webpagina kunnen opfleuren, waardoor deze toegankelijker wordt voor gebruikers. Het is over CSS3-overgangen, waarmee je een element kunt laten transformeren en de stijl kunt wijzigen, bijvoorbeeld door te zweven. De negen voorbeelden van CSS3-animaties die hieronder beschikbaar zijn, helpen bij het creëren van een responsieve sfeer op uw site en verbeteren ook algemene vorm pagina's dankzij mooie vloeiende overgangen.
Voor meer gedetailleerde informatie kunt u het archief met de bestanden downloaden.
Alle effecten werken met de eigenschap overgang. overgang- "transition", "transformation") en de pseudo-class: hover, die de stijl van het element bepaalt wanneer je er met de muiscursor overheen beweegt (in onze tutorial). Voor onze voorbeelden gebruikten we div blok grootte 500 × 309 pixels, originele achtergrondkleur # 6d6d6d en duur van de overgang van de ene toestand naar de andere 0,3 seconden.
Body> div (breedte: 500px; hoogte: 309px; achtergrond: # 6d6d6d; -webkit-transition: allemaal 0.3s gemak ;; -moz-transition: allemaal 0.3s gemak ;; -o-transition: allemaal 0.3s gemak ;; overgang: allemaal 0.3s gemak ;)
1. Verander van kleur bij zweven
Ooit was de implementatie van zo'n effect behoorlijk moeizaam werk, met wiskundige berekeningen bepaalde waarden RGB. Voor nu is het genoeg om op te schrijven CSS-stijl, waarin je de: hover pseudo-klasse moet toevoegen aan de selector en set Achtergrond kleur, die soepel (in 0,3 seconden) de originele achtergrondkleur vervangt wanneer je de muisaanwijzer over het blok beweegt:
Kleur: zweven (achtergrond: # 53ea93;)
2. Het uiterlijk van het frame:
Een interessante en levendige transformatie - een binnenframe dat soepel verschijnt bij muisaanwijzer. Goed voor het decoreren van verschillende knopen. Om dit effect te bereiken, gebruiken we de: hover pseudo-klasse en de box-shadow eigenschap met de inset parameter (stelt de schaduw in het element in). Bovendien moet u het gedeelte van de schaduw instellen (in ons geval is dit 23px) en de kleur ervan:
Rand: zweven (box-schaduw: inzet 0 0 0 23px # 53ea93;)
3. Schommel
Deze CSS-animatie is een uitzondering omdat de eigenschap transition hier niet wordt gebruikt. In plaats daarvan gebruikten we:
- @keyframes is een basisrichtlijn voor het maken van CSS frame-voor-frame animaties waarmee je zogenaamde. storyboard en beschrijf de animatie als een lijst met belangrijke punten;
- animatie en animatie-iteratie-telling - eigenschappen voor het instellen van animatieparameters (duur en snelheid) en het aantal cycli (herhalingen). Herhaal in ons geval 1.
4. Verzwakking:
het effect vloeiende vervaging is in feite een normale verandering in de transparantie van een element. De animatie wordt in twee fasen gemaakt: eerst moet u de initiële staat van transparantie instellen op 1 - dat wil zeggen volledige dekking, en vervolgens de waarde ervan specificeren met de muisaanwijzer - 0,6:
Fade (dekking: 1;) .fade: hover (dekking: 0.6;)
Wissel de waarden om voor het tegenovergestelde resultaat:
5. Verhogen
Om het blok te laten groeien bij het zweven, gebruiken we de eigenschap transform en stellen deze in op schaal (1.2). In dit geval zal het blok met 20 procent toenemen met behoud van zijn proporties:
Groeien: zweven (-webkit-transform: schaal (1.2); -ms-transform: schaal (1.2); transformeren: schaal (1.2);)
6. Verlagen
Een element verkleinen is net zo eenvoudig als het groter maken. Als we in de vijfde alinea, om de schaal te vergroten, een waarde groter dan 1 moesten specificeren, en om het blok te verkleinen, specificeren we eenvoudig een waarde die kleiner is dan één, bijvoorbeeld schaal (0,7). Nu, bij muisaanwijzer, zal het blok proportioneel krimpen met 30 procent van zijn oorspronkelijke grootte:
Verkleinen: zweven (-webkit-transform: schaal (0,7); -ms-transform: schaal (0,7); transformeren: schaal (0,7);)
7. Transformatie in een cirkel
Een van de veelgebruikte animaties is een rechthoekig element dat bij hover verandert in een cirkel. Het pand gebruiken CSS grensradius gebruikt in combinatie met: hover en transitie, dit kan zonder probleem worden gedaan:
Cirkel: zweven (grensradius: 70%;)
8. Rotatie
Een grappige animatieoptie is om een element een bepaald aantal graden te draaien. Om dit te doen, hebben we de eigenschap transform opnieuw nodig, maar met een andere waarde - roterenZ (20deg). Met deze parameters wordt het blok 20 graden met de klok mee rond de Z-as gedraaid:
Roteren: zweven (-webkit-transform: roterendeZ (20deg); -ms-transform: roterendeZ (20deg); transformeren: roterendeZ (20deg);)
9.3D schaduw
Ontwerpers zijn het er niet over eens of dit effect geschikt is voor een plat ontwerp. Deze CSS3-animatie is echter erg origineel en wordt ook op webpagina's gebruikt. We zullen een driedimensionaal effect bereiken met de hulp van degenen die ons al bekend zijn box-schaduw eigenschappen(creëert een gelaagde schaduw) en transformeert met de translateX (-7px) parameter (verschuift het blok 7 pixels horizontaal naar links):
Threed: hover (box-shadow: 1px 1px # 53ea93, 2px 2px # 53ea93, 3px 3px # 53ea93, 4px 4px # 53ea93, 5px 5px # 53ea93, 6px 6px # 53ea93, 7px 7px # 53ea93; -webkit-transform: translateX ( -7px); transformeren: translateX (-7px);)
Browserondersteuning
De overgangseigenschap wordt momenteel ondersteund door de volgende browsers:
| Desktopbrowsers | |
|---|---|
| Internet Explorer | Ondersteund door IE 10 en hoger |
| chroom | Ondersteund vanaf versie 26 (tot versie 25 werkt met het -webkit- prefix) |
| Firefox | Ondersteund sinds versie 16 (in versies 4-15 werkt het met het -moz- voorvoegsel) |
| Opera | Ondersteund sinds versie 12.1 |
| Safari | Ondersteund sinds versie 6.1 (in versies 3.1-6 werkt het met het -webkit- prefix) |
De overige eigenschappen die in deze voorbeelden worden gebruikt, zoals transformeren, box-schaduw, etc., worden ook door bijna iedereen ondersteund. moderne browsers... Als u deze ideeën echter voor uw projecten gaat gebruiken, raden we u ten zeerste aan om te controleren op compatibiliteit tussen verschillende browsers.
We hopen dat deze CSS3-animatievoorbeelden nuttig voor u waren. We wensen je creatief succes!
CSS3-animatie wordt veel gebruikt. Het is tijd om zelfs de meest beginnende websitebouwers uit te zoeken wat CSS-animatie is en hoe deze te maken. Je zou kunnen denken dat CSS3-animatie draait om het laten bewegen van blokken en dat het eruitziet als een tekenfilm. Maar CSS-animatie gaat niet alleen over het verplaatsen van een element van het ene punt naar het andere, maar ook over vervorming en andere transformaties. Om het ook voor beginners duidelijk te maken, heb ik alles in stappen beschreven.
1. Basiseigenschappen van CSS3-animatie
Een klein theoretisch blok waaruit je begrijpt welke CSS3-eigenschappen verantwoordelijk zijn voor animatie, evenals welke waarden ze kunnen aannemen.
- animatienaam — unieke naam animatie (keyframes, we zullen er hieronder over praten).
- animatieduur- animatieduur in seconden.
- animatie-timing-functie- animatie snelheidscurve. Op het eerste gezicht erg onbegrijpelijk. Het is altijd makkelijker om te laten zien met een voorbeeld, en je ziet ze hieronder. Het kan de volgende waarden aannemen: lineair | gemak | gemak in | uitrusten | kubieke-bezier (n, n, n, n).
- animatie-vertraging- vertraging in seconden voor het begin van de animatie.
- animatie-iteratie-telling- het aantal herhalingen van de animatie. Het wordt ofwel eenvoudig door een getal ingesteld, of u kunt oneindig specificeren en de animatie zal voor onbepaalde tijd worden uitgevoerd.
Hier zijn alleen de basiseigenschappen, die meer dan genoeg zijn om uw eerste CSS3-animatie te maken.
Het laatste dat we vanuit de theorie moeten weten en begrijpen, is hoe we keyframes kunnen maken. Dit is ook gemakkelijk te doen en wordt gedaan met behulp van de @keyframes-regel, waarbinnen keyframes worden gespecificeerd. De syntaxis voor deze regel is als volgt:
Hierboven stellen we het eerste en laatste frame in. Alle tussenliggende toestanden worden AUTOMATISCH berekend!
2. Een echt voorbeeld van CSS3-animatie
De theorie is zoals gewoonlijk saai en niet altijd even duidelijk. Het is veel gemakkelijker om alles te zien op echt voorbeeld, en het is het beste om het zelf te doen op een of andere HTML-testpagina.
Bij het leren van een programmeertaal schrijven ze meestal een programma "Hallo, wereld!" Maar we leren geen programmeertaal, maar een beschrijvingstaal. verschijning document. Daarom hebben we onze eigen "Hallo wereld!"
Dit is wat we zullen doen voor een voorbeeld: laten we een soort blok hebben Alles lijkt duidelijk - je hoeft alleen maar het blok te comprimeren Eerste HTML-opmaak... Het is heel eenvoudig omdat we maar met één element per pagina werken. En dit staat in de stylesheet: Zoals u kunt zien, hebben we alleen de eerste en laatste keyframes gespecificeerd en alle tussenliggende werden automatisch "gebouwd". Je eerste CSS3-animatie is klaar. Om de opgedane kennis te consolideren - create HTML-document en CSS-bestand, en daar invoegen (a betere handen type) de code uit het voorbeeld. Dan begrijp je zeker alles. Probeer vervolgens hetzelfde te doen met de blokhoogte (deze zou in hoogte moeten afnemen) om het materiaal vast te zetten. Hierboven heb je geleerd hoe gemakkelijk het is om CSS3-animaties te maken. Als je dit met je eigen handen hebt geprobeerd, dan heb je het hele proces al begrepen en nu wil je weten hoe je een complexer en mooie animatie... En het is echt mogelijk om het te maken. Hieronder staan 3 lessen waar animatie gemaakt wordt op dezelfde manier als in bovenstaand voorbeeld. 3 lessen verder CSS-animaties(transformaties) De tutorials helpen je om CSS-animatie nog beter te begrijpen. Het belangrijkste is om te proberen te herhalen wat je in de lessen ziet. Of probeer in ieder geval eigenschapswaarden te veranderen en kijk wat er gebeurt, dan word je minder bang voor CSS. Veel van het plezier dat we in animatie hebben, heeft te maken met bewegen over het scherm. verschillende objecten... hover CSS-effecten vestigen de aandacht van gebruikers op inhoud, een specifiek deel van de interface en verbeteren de algehele ervaring van de bron. Verplaatsen kan een beetje gek zijn, zoals dit: De beweging is misschien niet zo uitgesproken. Bijvoorbeeld degene die optreedt wanneer u de muiscursor over een van de vierkanten in de onderstaande afbeelding beweegt: Uw browser ondersteunt geen inline frames of is momenteel geconfigureerd om dit niet te doen inline weergeven kozijnen. In de bovenstaande voorbeelden wordt de beweging uitgevoerd met CSS gebruiken... Zowel animatie- als CSS-overgangen maken het uiterst eenvoudig om van statische naar beweging te gaan. Maar ondanks deze eenvoud zijn er bepaalde nuances waarmee rekening moet worden gehouden om ervoor te zorgen dat het CSS-hovereffect soepel werkt bij het zweven. In dit artikel vertel ik je er precies over. Als u een element verplaatst, verandert de verticale en horizontale positie. Er zijn verschillende CSS-eigenschappen die kunnen worden gebruikt om dit te bereiken. Maar ik wil je aanraden om de functie translate3d van de eigenschap transform te gebruiken in plaats van de gebruikelijke margin, padding, left, top, omdat het een vloeiendere animatie biedt. De functie translate3d heeft drie argumenten nodig, maar laten we eerst kijken naar degene die de inhoud horizontaal en verticaal verplaatsen: Het X-argument specificeert de horizontale beweging en Y de verticale beweging. Als u bijvoorbeeld inhoud 20 pixels naar rechts en omhoog wilt verplaatsen, ziet de functie translate3d er als volgt uit: Foo (transform: translate3d (20px, 20px, 0px);) We zullen het derde argument, dat de beweging langs de Z-as bepaalt, buiten beschouwing laten. Omdat we geïnteresseerd zijn in 2D-hover CSS-effecten. Zoals u kunt zien, is de functie translate3d niet bijzonder ingewikkeld. Vervolgens bekijken we hoe we het kunnen gebruiken in CSS-animaties om beweging te creëren. Er zijn twee stappen om deze eigenschap in een overgang te gebruiken. Eerst moet u transformatie specificeren als de eigenschap die de overgang moet volgen: PictureContainer img (positie: relatief; top: 0px; overgang: transform .2s gemak-in-out;) Nadat u de overgang hebt gedefinieerd, kunt u de eigenschap transformeren met de functie translate3d: PictureContainer img: hover (transform: translate3d (0px, -150px, 0px);) Zoals te zien is in het voorbeeld aan het begin van dit artikel, zorgt het CSS-zweefeffect bij het zweven over een van de elementen ervoor dat de afbeelding 150 pixels omhoog beweegt. Zorg er in het geval van animatie voor dat de keyframes in @keyframes de eigenschap transform bevatten met translate3d: @keyframes bobble (0% (transform: translate3d (50px, 40px, 0px); animatie-timing-functie: gemak-in;) 50% (transform: translate3d (50px, 50px, 0px); animatie-timing-functie: gemak -out;) 100% (transform: translate3d (50px, 40px, 0px);)) Het voorbeeld uit het artikel bevat alles wat je nodig hebt om te zien hoe het CSS-hovereffect werkt tafelindeling. Om de opmaak te laten werken in verschillende browsers, zorg ervoor dat u leveranciersvoorvoegsels of de bibliotheek —prefix-free gebruikt voor de eigenschap transform. U kunt ook bewegingsanimaties maken in JavaScript. Ook hier gelden dezelfde regels. Eerst moet je de positie instellen met transform translate3d, maar in JavaScript is het iets gecompliceerder. Het codefragment dat hiervoor nodig is, is als volgt: functie getSupportedPropertyName (eigenschappen) (for (var i = 0; i< properties.length; i++) {
if (typeof document.body.style] != "undefined") {
return properties[i];
}
}
return null;
}
var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"];
var item = document.querySelector("#theItem");
var transformProperty = getSupportedPropertyName(transform);
if (transformProperty) {
item.style = translate3d(someValueX, someValueY, 0px);
} Deze code lijkt lastig omdat we voorvoegsels gebruiken en controleren met de versie van transformatie die we gebruiken. Waarom is het niet geschikt voor ons om een positie in te nemen met? marge gebruiken, boven, links, enz.? Tenzij je een specifieke reden hebt, gebruik de hover niet om te creëren CSS-effecten
marge eigenschappen, opvulling, boven, links, onder of rechts. Hoewel dit misschien contra-intuïtief lijkt. Laat me duidelijk zijn... Wanneer u de reeks waarden wijzigt voor de zes CSS-eigenschappen die ik zojuist heb genoemd, doet de browser aanvullende berekeningen over hoe deze op de lay-out van de hele pagina zal verschijnen. Ik vind het niet erg om deze eigenschappen te gebruiken om met de lay-out te werken. Maar ze gebruiken in animaties of overgangen en de waarden zestig keer per seconde veranderen is overdreven. U kunt de positie van het element dat u verplaatst naar vast of absoluut instellen. Hierdoor hoeft de browser niet de lay-out voor het hele document te berekenen. Maar in dit geval voert de browser nog steeds berekeningen uit op het element dat wordt verplaatst. En het resultaat van het toepassen van translate3d zal niet noodzakelijk identiek zijn aan het resultaat van het gebruik van marges, opvulling, enz. Bovendien zullen ze, zoals u in de volgende sectie zult zien, niet 100% identiek zijn. Wanneer we te maken hebben met de weergave van elementen op het scherm, kunnen de bijbehorende berekeningen worden uitgevoerd met behulp van een processor of videokaart. Maar voor CSS maken hover-effecten voor tafelindeling, is het beter om een videokaart te gebruiken: De GPU is alleen ontworpen om beeldschermgerelateerde taken uit te voeren. Tegelijkertijd verwerkt de processor een grote verscheidenheid aan taken parallel. En om ervoor te zorgen dat uw animatie soepel wordt weergegeven, mag dit patroon niet worden verwaarloosd. Het verschil in de vloeiendheid van de animatieweergave is misschien niet erg merkbaar op een krachtige desktop computer of laptop, maar wordt duidelijk weergegeven op mobiele toestellen... Van persoonlijke ervaring Ik kan zeggen dat op deze apparaten de animatie met behulp van de CPU meer met tussenpozen wordt afgespeeld dan die met de GPU. En hoe zorg je ervoor dat de animatie in hardware acceleratie GPU gebruikt? Vertalen3d toepassen! Bij het transformeren van een element met behulp van translate3d, wordt het verwerkt via de GPU in Webkit-browsers zoals Chrome en Safari ( die zijn geïnstalleerd op iPhone en iPad), zowel in Internet Explorer 9/10 als in laatste versies Firefox. Dit geeft translate3d duidelijke voordelen. Wat betreft hover-CSS-effecten die zijn ingebouwd in JavaScript, waarbij alle interpolaties worden afgehandeld door code, weet ik niet echt of GPU-gebruik zo productief. Maar voor installatie met JavaScript gebruiken CSS-overgangen en animaties met de eigenschap translate3d worden gebruikt door de GPU. Wanneer u JavaScript gebruikt om animatie- of overgangseigenschappen in te stellen, wordt de interpolatie tussen het begin- en eindpunt van de animatie nog steeds gemaakt met behulp van de browser. De bewegende blauwe cirkels die je misschien aan het begin van dit artikel hebt gezien, zijn daar het bewijs van. God zegene de transformatie! De reden dat transformatie beter presteert, is omdat het geen invloed heeft op andere elementen. Alle acties die u onderneemt, zijn alleen van toepassing op één element en de browser hoeft niet het hele venster opnieuw op te bouwen. Het wijzigt alleen het deel van het scherm dat bewegende inhoud bevat. Het maakt niet uit of de GPU erbij betrokken is of niet. 1
<div class = "toSmallWidth">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.toSmallWidth (marge: 20px automatisch; / * 20px boven- en ondervulling en middelste uitlijning * / achtergrond: rood; / * rode achtergrond voor het blok * / hoogte: 100px; / * blokhoogte 100px * / breedte: 800px; / * initiële breedte 800px * /-webkit-animatienaam: animWidthSitehere; -webkit-animatie-duur: 5s; / * eigenschap met een voorvoegsel voor browsers Chrome, Safari, Opera * / animatienaam: animWidthSitehere; / * specificeer de naam van de keyframes (hieronder te vinden) * / animatieduur: 5s; / * animatieduur instellen * /
}
/ * keyframes met een voorvoegsel voor browsers Chrome, Safari, Opera * /
@ -webkit-keyframes animWidthSitehere ( van (breedte: 800px;) tot (breedte: 100px;)) @keyframes animWidthSitehere ( van (breedte: 800px;) / * eerste keyframe waarbij de blokbreedte 800px is * / naar (breedte: 100px;) / * laatste keyframe waarbij de blokbreedte 100px is * /
}
3. Voorbeelden van CSS3-animatie zijn complexer
Converteren met translate3d ()
Overgang
Animatie
Vergeet voorvoegsels niet
Overgangen met JavaScript
Onnodige berekeningen
Hardware acceleratie
Hoe zit het met JavaScript?
