Voorbeelden van CSS-animaties. Alfabet met CSS-animatie

Vóór de komst van CSS3 zorgde het woord ‘animatie’ ervoor dat programmeurs het koude zweet uitbraken. En dat allemaal omdat in die tijd hoogwaardige en prachtige animatie was geen triviale taak. CSS kon dit niet, dus werden alle animaties in JavaScript gedaan. Het was nodig om een ​​aantal forums te doorzoeken, dezelfde kameraden in tegenslag te vinden, veel tijd aan ontwikkeling te besteden en uiteindelijk van de ontwerper te horen: "Oké, dit is voldoende." En toen CSS3 eindelijk uitkwam, stopte het vuurwerk pas in de ochtend en vloeide de champagne als een rivier. Het was een geweldige dag voor alle webontwikkelaars (de volgende dag was de dag waarop Microsoft het einde van de ondersteuning aankondigde Internet Explorer). Met de komst van CSS3, veel eerder complexe taken zijn eenvoudig en prettig geworden om mee te werken. Hetzelfde geldt voor animaties in CSS, waar ik het in dit artikel over zal hebben.

CSS-overgangen

Met CSS-overgangen kunt u soepel en in de loop van de tijd wijzigingen aanbrengen in CSS-eigenschappen. Op deze manier krijgt u de mogelijkheid om het proces van de overgang van een element van de ene toestand naar de andere te controleren. Laten we beginnen met het eenvoudigste voorbeeld en verder gaan.

Wanneer u de cursor over het vierkant beweegt, verandert de achtergrondkleur vloeiend.

Laten we nu eens nader bekijken hoe u overgangen in CSS kunt beheren. We hebben slechts 5 eigenschappen waarmee we overgangsanimatie kunnen besturen:

• overgangseigendom;
• transitieduur;
• transitie-timing-functie;
• transitie-vertraging;
• overgang;

overgangseigendom- specificeert een lijst met eigenschappen die zullen worden geanimeerd; eigenschappen die hier niet zijn gespecificeerd, worden zoals gebruikelijk gewijzigd. U kunt alle eigenschappen voor een specifiek element animeren door de waarde all op te geven. Als u geen eigenschappen opgeeft, is de standaardwaarde all.

Overgangseigenschap: breedte;

transitie-duur- stelt de duur van de animatie in, kan worden opgegeven in seconden of milliseconden.

Overgangsduur: 1s;

transitie-timing-functie- tijdfunctie, geeft punten van versnelling en vertraging aan bepaalde periode tijd om veranderingen in de animatiesnelheid te beheersen. Simpel gezegd kunt u deze eigenschap gebruiken om het gedrag van een animatie te specificeren. We kunnen de animatie bijvoorbeeld aan het begin versnellen en aan het einde vertragen, of omgekeerd. Bezier-curven worden gebruikt om het animatieproces te definiëren. Over het algemeen kunt u met de transitie-timing-functie veel doen verschillende gedragingen voor animaties is dit een heel onderwerp voor een artikel, dus we zullen hier niet dieper op ingaan.

Overgangtimingfunctie: kubieke-bezier(0, 0, 1, 1);

transitie-vertraging- stelt de tijdsvertraging in vóór het begin van de animatie, kan worden opgegeven in seconden of milliseconden.

Overgangsvertraging: 500 ms;

overgang- Dit algemeen bezit, waarmee u de eerste vier eigenschappen in volgorde kunt weergeven: eigenschap, duur, timingfunctie, vertraging.

Overgang: achtergrondkleur 1s kubieke-bezier(0, 0, 1, 1) 500ms;

We hebben deze eenvoudige animatie: als je met de muis over het vierkant beweegt, verandert de breedte; animatieduur is één seconde; animatie speelt door lineaire functie; vertraging voordat de animatie begint 500 milliseconden.

MET met behulp van CSS transities kunnen bijna alle eigenschappen animeren en vele interessante, mooie, functionele en zelfs complexe animaties creëren die uw project zullen aanvullen en verbeteren. Ik maakte er bijvoorbeeld deze Material-FAB ​​op pure CSS overgangen gebruiken:

CSS-animaties

Met CSS-animaties kunt u complexere animaties maken dan met CSS-overgangen. Het hele geheim zit in @keyframes. Met de @keyframes-regel kunt u animatie maken met behulp van een reeks sleutelframes, dat wil zeggen dat de regel de toestand van een object op een bepaald tijdstip beschrijft. Laten we naar een eenvoudig voorbeeld kijken.

Onze cirkel is tot leven gekomen en lijkt te pulseren.

Er zijn 9 eigenschappen waarmee u CSS-animaties kunt beheren:

• animatienaam;
• animatieduur;
• animatie-timing-functie;
• animatie-vertraging;
• animatie-iteratie-telling;
• animatie-richting;
• animatie-play-status;
• animatie-vul-modus;
• animatie;

animatienaam- hier is de naam van de animatie die de @keyframes-regel koppelt aan de selector.

Animatienaam: mijn-animatie;

@keyframes mijn-animatie ( 0% ( dekking: 0; ) 100% ( dekking: 1; ) ) animatie-iteratie-telling

- stelt het aantal herhalingen van de animatie in, de standaardwaarde is 1. De waarde oneindig betekent dat de animatie eindeloos wordt afgespeeld.

Aantal animatie-iteraties: 2; animatie-richting

- bepaalt de richting van de animatie.

Animatierichting: achteruit; - animatie-play-status dit pand

regelt het stoppen en afspelen van animatie. Er zijn twee waarden: actief (de animatie wordt standaard afgespeeld) en gepauzeerd (stopt de animatie).

Animatie-afspeelstatus: gepauzeerd; animatie-vul-modus

• geen - geanimeerde CSS-eigenschappen worden alleen op het object toegepast terwijl de animatie wordt afgespeeld, en na voltooiing keert het object terug naar de oorspronkelijke staat;
• forwards - geanimeerde CSS-eigenschappen worden op het object toegepast nadat de animatie is afgespeeld;
• achteruit - geanimeerde CSS-eigenschappen worden op het object toegepast voordat de animatie begint te spelen;
• beide - geanimeerde CSS-eigenschappen worden zowel voor als na het einde van de animatie op het object toegepast;

Animatie-vulmodus: achteruit;

Eigenschappen animatie-duur, animatie-timing-functie, animatie-vertraging Ze werken op dezelfde manier als vergelijkbare eigenschappen in CSS-overgangen, waarover ik eerder schreef, dus ik zal ze niet herhalen.

Met animaties CSS kun je vrij complexe animaties maken zonder met behulp van JavaScript. Een sprekend voorbeeld- dit zijn laders, dat wil zeggen elementen die laten zien dat er iets op uw pagina wordt geladen. Hier zijn enkele voorbeelden:

Bewegingspadmodule

Met Motion Path Module CSS kunt u bewegingen van objecten langs een pad creëren via de speciale motion-path eigenschap. Voorheen kon een dergelijke animatie alleen met met behulp van SVG of complexe scripts.

Deze specificatie heeft 3 eigenschappen:

• bewegingspad;
• bewegings-offset;
• beweging-rotatie;

bewegingspad- met deze eigenschap kunt u de punten (coördinaten) opgeven waarlangs het object zal bewegen. De syntaxis is hetzelfde als het SVG-padkenmerk.

Bewegingspad: pad("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");

beweging-offset- deze eigenschap zet een object in beweging vanaf het startpunt tot het eindpunt. Het accepteert de dubbele lengte of een percentage. Om het object te laten bewegen, moet u een animatie definiëren die van 0 tot 100% gaat.

@keyframes vliegtuigvlieg ( 0% ( bewegings-offset: 0; ) 100% ( bewegings-offset: 100%; ) )

beweging-rotatie- met deze eigenschap kunt u opgeven aan welke kant het object naar voren zal bewegen. U kunt auto, reverse of uw eigen waarde opgeven in graden ("-45deg", "30deg", enz.).

Beweging-rotatie: auto;

Helaas wordt motion-path momenteel alleen ondersteund in Chrome en Opera, maar laten we hopen dat andere browsers snel hun voorbeeld zullen volgen, want het ding is echt nuttig.

Voor degenen die nog niet hebben begrepen hoe dit werkt, of het beter willen begrijpen, heb ik een voorbeeld gemaakt (link naar codeopen).

CSS3-animatie Geeft sites dynamiek. Het brengt webpagina's tot leven en verbetert de gebruikerservaring. In tegenstelling tot CSS3-overgangen is het maken van animaties gebaseerd op keyframes, waarmee u automatisch effecten gedurende een bepaalde tijd kunt afspelen en herhalen, en de animatie binnen een lus kunt stoppen.

CSS3-animatie kan voor bijna alle html-elementen worden gebruikt, evenals voor de:before en:after pseudo-elementen. De lijst met geanimeerde eigenschappen vindt u op de pagina. Vergeet dit niet bij het maken van animatie mogelijke problemen met prestaties, omdat het wijzigen van sommige eigenschappen veel middelen vereist.

Inleiding tot CSS-animatie

Browser-ondersteuning

D.W.Z: 10.0
Firefox: 16,0, 5,0 -moz-
Chroom: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS-Safari: 9, 7.1 -webkit-
Opera Mini: —
Android-browser: 44, 4.1 -webkit-
Chroom voor Android: 44

1. @keyframes-regel

Het maken van animaties begint met de installatie sleutelframes@keyframes-regels. Frames bepalen welke eigenschappen bij welke stap worden geanimeerd. Elk frame kan één of meer declaratieblokken van één of meer eigenschaps- en waardeparen bevatten. De @keyframes-regel bevat de naam van de animatie van het element, die de regel en het declaratieblok van het element koppelt.

@keyframes schaduw (van (tekstschaduw: 0 0 3px zwart;) 50% (tekstschaduw: 0 0 30px zwart;) naar (tekstschaduw: 0 0 3px zwart;) )

Keyframes worden gemaakt met behulp van de trefwoorden van en naar (equivalent aan de waarden 0% en 100%) of met behulp van procentpunten, die u zoveel kunt opgeven als u wilt. Kan ook gecombineerd worden trefwoorden en procentpunten. Als frames dezelfde eigenschappen en waarden hebben, kunnen ze worden gecombineerd in één declaratie:

@keyframes verplaatsen ( van, naar (boven: 0; links: 0; ) 25%, 75% (boven: 100%;) 50% (boven: 50%;) )

Als er geen 0% of 100% frames zijn opgegeven, maakt de browser van de gebruiker deze aan met behulp van de berekende (oorspronkelijk ingestelde) waarden van de geanimeerde eigenschap. Als twee keyframes dezelfde selectors hebben, annuleert de volgende de vorige.

Zodra de @keyframes-regel is gedeclareerd, kunnen we ernaar verwijzen in de animatie-eigenschap:

H1 (lettergrootte: 3,5em; kleur: donkermagenta; animatie: schaduw 2s oneindig gemak-in-uit; )

Het wordt niet aanbevolen om niet-numerieke waarden te animeren (op zeldzame uitzonderingen na), omdat het resultaat in de browser onvoorspelbaar kan zijn. Je moet ook geen keyframes maken voor eigenschapswaarden die geen middelpunt hebben, zoals eigenschapswaarden color: pink en color: #ffffff , width: auto en width: 100px , of border-radius: 0 en border- radius: 50% (in dit geval zou het correct zijn om de grensradius op te geven: 0%).

2. Animatienaam animatienaam

De eigenschap specificeert de naam van de animatie. De animatienaam wordt gemaakt in de @keyframes-regel. Het wordt aanbevolen om een ​​naam te gebruiken die de essentie van de animatie weerspiegelt, en u kunt een of meer woorden gebruiken die aan elkaar zijn gekoppeld door middel van een spatie - of het onderstrepingsteken _. Het onroerend goed wordt niet geërfd.

Syntaxis

Div (animatienaam: mymove;)

3. Animatieduur animatieduur

De eigenschap bepaalt de duur van de animatie, ingesteld in seconden of milliseconden, negatieve waarden zijn niet toegestaan. Niet geërfd. Als er voor een element meer dan één animatie is opgegeven, kunt u dit instellen verschillende tijden voor elk, met een opsomming van de waarden, gescheiden door komma's.

Syntaxis

Div (animatieduur: 2s;)

4. Timingfunctie animatie-timing-functie

De eigenschap definieert de verandering in snelheid vanaf het begin tot het einde van de animatie met behulp van timingfuncties. Gespecificeerd met trefwoorden of een Bezier-curve kubieke-bezier(x1, y1, x2, y2) . Niet geërfd.

Syntaxis

Div (animatie-timing-functie: lineair;)

Door te gebruiken stap-voor-stap animatie kan worden gemaakt interessante effecten, zoals tekst die wordt afgedrukt of een laadindicator.

5. Animatie met vertraging animatie-vertraging

De eigenschap negeert animatie gedurende een bepaalde tijd, waardoor het mogelijk is elke animatie afzonderlijk uit te voeren. Een negatieve vertraging start de animatie vanaf een bepaald punt binnen de cyclus, d.w.z. vanaf het in de vertraging aangegeven tijdstip. Hierdoor kunt u animatie toepassen op meerdere in fase verschoven elementen door alleen de vertragingstijd te wijzigen.

Om de animatie vanuit het midden te laten starten, moet je een negatieve vertraging instellen die gelijk is aan de helft van de tijd die is ingesteld in animatieduur . Niet geërfd.

Syntaxis

Div (animatie-vertraging: 2s;)

6. Herhaal animatie-animatie-iteratie-telling

Met deze eigenschap kunt u de animatie meerdere keren uitvoeren. Een waarde van 0 of een negatief getal zorgt ervoor dat de animatie niet meer wordt afgespeeld. Niet geërfd.

Syntaxis

Div (aantal animatie-iteraties: 3;)

7. Animatierichting animatierichting

De eigenschap specificeert de richting waarin de animatie zich herhaalt. Als de animatie slechts één keer wordt herhaald, heeft deze eigenschap geen betekenis. Niet geërfd.

Syntaxis

Div (animatie-regie: afwisselend;)

8. Korte opname van de animatie

Alle afspeelparameters voor animaties kunnen worden gecombineerd in één eigenschap - animatie , waarbij ze worden gescheiden door een spatie:

Animatie: animatienaam animatieduur animatie-timing-functie animatie-vertraging animatie-iteratie-aantal animatie-richting;

Om de animatie af te spelen volstaat het om slechts twee eigenschappen op te geven: animatienaam en animatieduur. De overige eigenschappen nemen hun standaardwaarden aan. De volgorde waarin de eigenschappen worden vermeld doet er niet toe, het enige is dat de uitvoeringstijd van de animatieduur vóór de vertraging van de animatievertraging moet liggen.

9. Animatie-afspeelstatus afspelen

De eigenschap regelt het afspelen en stoppen van de animatie. Het stoppen van animatie binnen een lus is mogelijk door deze eigenschap te gebruiken in JavaScript-script. Je kunt de animatie ook stoppen als je met de muis over een object beweegt - state:hover . Niet geërfd.

Syntaxis

Div: hover (animatie-afspeelstatus: gepauzeerd;)

10. Staat van het element voor en na het afspelen van de animatie-animatie-vul-modus

De eigenschap bepaalt de volgorde waarin de stijlen die zijn gedefinieerd in @keyframes op het object worden toegepast. Niet geërfd.

Hallo, lieve lezers. Laten we het deze dag hebben over een nogal interessant ding genaamd CSS-animatie. Dat wil zeggen, deze animatie van elementen wordt alleen gedaan met behulp van stijlen en er worden hier geen scripts gebruikt.

Zoals u kunt zien, is hier een attribuut aanwezig :zweven, waardoor de achtergrondstijl bij het zweven verandert, zou dit in sommige voorbeelden vereist moeten zijn;

Verander soepel de kleur van een element tijdens het zweven met behulp van de overgang

#doos1 (
marge-onder: 5px;
achtergrondkleur: #ccc;

opvulling: 10px;
tekst uitlijnen: centreren;
breedte: 200px;
hoogte:100px;

tekstinspringing: 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 u kunt zien, hebben we deze animatie gerealiseerd met behulp van het attribuut overgang. Hier kunt u de animatiesnelheid in seconden wijzigen in dit geval kost 0,8s tot volledige verandering kleuren bij het zweven en 0,1 seconde voordat de animatie werkt na het zweven en verwijderen van de cursor. (Sorry voor de puzzel :-)) Deze waarde kan naar behoefte worden gewijzigd.

De achtergrondkleur bij het zweven is ingesteld als 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: centreren;
breedte: 200px;
hoogte:100px;

tekstinspringing: 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 zijn we geslaagd soepele verandering blokgrootte bij hover. De standaardwaarde is 200 bij 100 en de hover-waarde is 150 bij 50, die wordt gespecificeerd door het attribuut :zweven.

Hier kun je het blok ook alleen in de breedte of hoogte veranderen, dat hoeft alleen maar :zweven verwijderen breedte:— het blok verandert alleen in hoogte, hoogte:— het blok verandert alleen in de breedte.

U kunt ook de veranderingssnelheid wijzigen. In dit geval is het 1s.

Object-torsie

#box3 (
marge-onder: 5px;
achtergrondkleur: #ccc;
kleur: #333;

opvulling: 10px;
tekst uitlijnen: centreren;
breedte: 200px;
hoogte:100px;

tekstinspringing: 0px;
rand: 1px effen #888;
-moz-overgang: alle 1s 0,1s gemak-in;
-o-overgang: alle 1s 0,1s gemak-in;
-webkit-transitie: alle 1s 0.1s gemak-in;
cursor: aanwijzer;)

#box3:beweeg (
achtergrondkleur: #97CE68;
kleur: #000;
-webkit-transformatie: roteren (360 graden);
-moz-transform: roteren (360 graden);
-o-transformeren: roteren (360 graden);
}

Torsie treedt op bij gebruik transformeren En overgang. In dit geval draait het object 360 graden met de klok mee met een snelheid van één seconde. Als je wilt dat het blok tegen de klok in draait, transformeren waarde moet worden ingesteld op - (min). Uiteraard kan de mate van rotatie worden gewijzigd.

Vloeiend in- en uitzoomen op een object

#box4 (
marge-onder: 5px;
achtergrondkleur: #ccc;
kleur: #333;
opvulling: 10px;
tekst uitlijnen: centreren;
breedte: 200px;
hoogte:100px;

tekstinspringing: 0px;
rand: 1px effen #888;
-moz-overgang: alle 3s gemakshalve;
-o-overgang: alle 3-en gemakshalve;
-webkit-transitie: alle 3s gemak-out;
cursor: aanwijzer;)

#box4:beweeg (
achtergrondkleur: #97CE68;
kleur: #000;
-webkit-transformatie: schaal(2);
-moz-transform: schaal(2);
-o-transformeren: schaal(2);
}

In dit voorbeeld wordt het blok vloeiend 2 keer groter. Deze waarde is ingesteld transformeren: schaal(2). Als u de waarde instelt op 1,5, wordt het blok 1,5 keer vergroot.

Op dezelfde manier als jij verkleinen blok, stel de waarde bijvoorbeeld in op 0,5.

Soepele blokverschuiving naar beneden

#doos5 (
marge-onder: 5px;
achtergrondkleur: #ccc;
kleur: #333;
opvulling: 10px;
tekst uitlijnen: centreren;
breedte: 200px;
hoogte:100px;

tekstinspringing: 0px;
rand: 1px effen #888;
-moz-transitie: alle 1's gemak-in-uit;
-o-overgang: alle 1's gemak-in-uit;
-webkit-transitie: alle 1s gemak-in-uit;
cursor: aanwijzer;)

#box5:beweeg (
achtergrondkleur: #97CE68;
kleur: #000;
-webkit-transform: vertalen(0.50px);
-moz-transform: vertalen(0.50px);
-o-transformeren: vertalen(0.50px);
}

Hier wordt de beweging gespecificeerd in pixels. In dit geval (0,50px). Je kunt het blok ook omhoog laten komen met deze waarde van 0.-50px. Of diagonaal 50px, 50px naar beneden. Kortom, het blok kan overal naartoe worden verplaatst.

Dat is eigenlijk alles wat ik wilde zeggen. Nee, niet alles :-) Ik vergat je eraan te herinneren dat deze CSS-animatie kan worden toegepast op alle objecten op de site: afbeeldingen, tekst, kopjes, pictogrammen, enz. Voor schakels is een vloeiende kleurverandering perfect; naar mijn mening is het erg mooi. :-)

En deze informatie werd ook met ons gedeeld door de site shpargalkablog.ru. Waarvoor ik hem hartelijk dank.

Dat is nu allemaal zeker :-) Tot snel, vrienden.

Veel van wat ons vreugde brengt in animatie, komt van het bewegen over het scherm diverse voorwerpen. hover CSS-effecten trekken de aandacht van gebruikers naar de inhoud, een bepaald deel van de interface, en verbeteren de algehele perceptie van de bron.

Bewegen kan een beetje gek zijn, zoals dit:

De beweging is misschien niet zo duidelijk. Bijvoorbeeld degene die verschijnt als u met uw muis over een van de vierkanten in de onderstaande afbeelding beweegt:

Uw browser ondersteunt geen inline frames of is momenteel geconfigureerd om geen inline frames weer te geven.

In de gegeven voorbeelden wordt beweging geïmplementeerd met behulp van CSS. Zowel animatie als CSS-overgangen maken het uiterst eenvoudig om van statisch naar bewegend te gaan. Maar ondanks deze eenvoud zijn er bepaalde nuances waarmee rekening moet worden gehouden CSS-zweefbeweging Het hover-effect werkte soepel. In dit artikel vertel ik je er precies over.

Transformatie met translate3d()

Wanneer u een element verplaatst, wordt het verticaal en horizontale positie. Er zijn er meerdere CSS-eigenschappen, die hiervoor worden gebruikt. Maar ik wil je aanraden om de translate3d-functie van de transform-eigenschap te gebruiken in plaats van de gebruikelijke margin , padding , left , top, omdat deze voor vloeiendere animaties zorgt.

De functie translate3d heeft drie argumenten nodig, maar laten we eerst eens kijken naar de argumenten die verantwoordelijk zijn voor het horizontaal en verticaal verplaatsen van inhoud:

Het X-argument specificeert horizontale beweging, Y – verticale beweging. Als u bijvoorbeeld de inhoud 20 pixels naar rechts en omhoog wilt verplaatsen, zou de translate3d-functie er als volgt uit moeten zien:

Foo ( transformeren: vertalen3d(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 translate3d-functie niet bijzonder ingewikkeld. Vervolgens bekijken we hoe we het in CSS-animatie kunnen gebruiken om beweging te creëren.

Overgang

Om deze eigenschap in een transitie te gebruiken, zijn er twee stappen. Eerst moet u transform opgeven als de eigenschap die de overgang moet volgen:

PictureContainer img ( positie: relatief; boven: 0px; overgang: transform .2s gemak-in-uit; )

Nadat u een overgang heeft gedefinieerd, kunt u de eigenschap transform instellen met de functie translate3d:

PictureContainer img:hover ( transformeren: vertalen3d(0px, -150px, 0px); )

Zoals u kunt zien in het voorbeeld aan het begin van het artikel, zorgt het CSS-zweefeffect wanneer u de muiscursor over een van de elementen beweegt ervoor dat de afbeelding 150 pixels naar boven verschuift.

Animatie

Zorg er in het geval van animatie voor dat de keyframes in @keyframes een transform-eigenschap bevatten met translate3d :

@keyframes bobble ( 0% ( transformatie: translate3d(50px, 40px, 0px); animatie-timing-functie: gemak-in; ) 50% ( transformatie: translate3d(50px, 50px, 0px); animatie-timing-functie: gemak -uit; ) 100% ( transformeren: vertalen3d(50px, 40px, 0px); ) )

Het voorbeeld uit het artikel bevat alles wat u nodig heeft om te zien hoe het CSS-hovereffect voor de tabelindeling werkt.

Vergeet de voorvoegsels niet

Om de opmaak te laten werken verschillende browsers Zorg ervoor dat u leveranciersvoorvoegsels of de --prefix-free bibliotheek gebruikt voor de transform-eigenschap.

Overgangen met JavaScript

Je kunt ook bewegende animaties maken in JavaScript. Hier gelden dezelfde regels. Eerst moet je de positie instellen met transform translate3d , maar in JavaScript is dit iets ingewikkelder.

Het codefragment dat hiervoor nodig is, ziet er als volgt uit:

function 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 ingewikkeld omdat we voorvoegsels gebruiken en controleren of deze overeenkomen met de versie van de gebruikte transformatiefunctie.

Waarom is het voor ons niet geschikt om een ​​standpunt in te nemen? marge gebruiken, boven , links enz.?

Gebruik geen CSS om hover-effecten te creëren, tenzij u daar een specifieke reden voor heeft. marge-eigenschappen, opvulling , boven , links , onder of rechts . Hoewel dit misschien contra-intuïtief lijkt. Laat me het verduidelijken...

Onnodige berekeningen

Wanneer je de set waarden wijzigt voor de zes CSS-eigenschappen die ik zojuist heb genoemd, maakt de browser aanvullende berekeningen over hoe dat in de lay-out van de hele pagina zal verschijnen. Ik ben er niet tegen om deze eigenschappen te gebruiken voor lay-outwerk. Maar ze gebruiken in animaties of overgangen en zestig keer per seconde waarden wijzigen is te veel.

U kunt de positie van het element dat u verplaatst instellen op vast of absoluut. 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 beweegt. En het resultaat van het gebruik van translate3d zal niet noodzakelijkerwijs identiek zijn aan het resultaat dat wordt verkregen met behulp van marge, opvulling, enz. Bovendien zullen ze, zoals u in het volgende gedeelte zult zien, niet 100% identiek zijn.

Hardwareversnelling

Als het gaat om het weergeven van elementen op het scherm, kunnen de bijbehorende berekeningen worden gedaan met behulp van een processor of videokaart. Maar voor CSS-creatie hover-effecten voor tabelopmaak, het is beter om een ​​videokaart te gebruiken:

De GPU is alleen ontworpen om beeldschermgerelateerde taken uit te voeren. Tegelijkertijd verwerkt de processor parallel enorm bedrag diverse taken. En om ervoor te zorgen dat uw animatie soepel wordt weergegeven, kunt u dit patroon niet negeren. Het verschil in de vloeiendheid van de animatieweergave is mogelijk niet erg merkbaar op een krachtig apparaat desktopcomputer of laptop, maar zal duidelijk zichtbaar zijn mobiele apparaten. Van persoonlijke ervaring Ik kan zeggen dat op deze apparaten de animatie is met behulp van CPU speelt schokkeriger dan degene die de GPU gebruikt.

Hoe zorg je ervoor dat de animatie binnen is? hardwareversnelling heb je GPU gebruikt? Vertaal3d toepassen! Wanneer u een element transformeert met behulp van translate3d, wordt het verwerkt via de GPU in Webkit-browsers zoals Chrome en Safari ( die op iPhone en iPad zijn geïnstalleerd), in Internet Explorer 9/10, en ook in nieuwste versies Firefox. Dit geeft translate3d duidelijke voordelen.

Hoe zit het met JavaScript?

Wat betreft CSS-zweefeffecten die in JavaScript zijn gemaakt, waarbij alle interpolatie door code wordt afgehandeld, weet ik eigenlijk niet of het gebruik van de GPU zo productief is. Maar om mee te installeren met behulp van JavaScript CSS-overgangen en animaties met de eigenschap translate3d worden door de GPU gebruikt.

Wanneer u JavaScript gebruikt om animatie- of overgangseigenschappen in te stellen, wordt interpolatie tussen de initiële en eindpunt de animatie wordt 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 andere elementen beïnvloedt. Alle acties die u uitvoert, zijn van toepassing op slechts één element en de browser hoeft niet het hele venster opnieuw op te bouwen. Het wijzigt alleen het deel van het scherm dat de bewegende inhoud bevat. Dit hangt niet af van het feit of de GPU erbij betrokken is of niet.

Alle moderne browsers, behalve IE9 - ondersteunt CSS-overgangen en CSS-animaties, waarmee u animaties kunt implementeren met behulp van CSS, zonder dat er JavaScript bij betrokken is. Animatie is van toepassing op alle HTML-elementen, evenals op pseudo-elementen :voor En :na

Browser-ondersteuning

D.W.Z: 10.0
Firefox: 16,0, 5,0 -moz-
Chroom: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS-Safari: 9, 7.1 -webkit-
Opera Mini: -
Android-browser: 44, 4.1 -webkit-
Chrome voor Android: 44

Om animatie in uw project te gebruiken, hoeft u slechts twee dingen te doen:

1. Maak de animatie zelf met het trefwoord @keyframes
2. Verbind het met het element dat geanimeerd moet worden en specificeer de benodigde eigenschappen.

@keyframes-regel

Regel @sleutelframes Hiermee kunt u animaties maken met behulp van keyframes - toestanden van een object op een bepaald tijdstip.

Animatiesleutelframes worden gemaakt met behulp van trefwoorden van En naar(equivalent aan de waarden 0% en 100%) of met behulp van procentpunten, die u zoveel kunt instellen als u wilt. U kunt ook zoekwoorden en procentpunten combineren.

Indien initieel ( van, 0%) of definitief ( naar, 100%) frame, zal de browser voor hen installeren berekende waarden geanimeerde eigenschappen zoals ze zouden zijn als animatie niet was toegepast.

Als twee keyframes dezelfde selectors hebben, annuleert de volgende de vorige.

Bij het definiëren van een animatie direct na een eigenschap @sleutelframes moet worden gevolgd door de naam van deze animatie ( voornaam moet dan worden opgegeven in de animatie-eigenschap van het te animeren element).

@keyframes verplaatsen ( van ( transformeren: vertalenX(0px); ) 50% ( transformeren: vertalenX(130px); ) 100% ( transformeren: vertalenX(0px); ) )

We hebben een animatie gemaakt die als volgt werkt:

1. Begin van animatie ( van had 0%) kunnen zijn - de positie van het element langs de X-as is 0px;
2. Midden van animatie (50%) - de positie van het element langs de X-as is 130px;
3. Einde animatie ( naar we gebruikten 100%) - we brengen het element terug naar het begin van de animatie, d.w.z. de X-aspositie van het element is 0px;

Hier en hieronder heb ik voor het gemak in de voorbeelden verschillende regels JavaScript geschreven die afwisselend een klasse met animatie aan een element toevoegen of verwijderen. Om de animatie af te spelen, klikt u gewoon op dit element.

Keyframes kunnen worden gegroepeerd:

@keyframes verplaatsen ( van ( transformeren: vertalenX(0px); ) 25%, 50% ( transformeren: vertalenX(130px); ) 100% ( transformeren: vertalenX(0px); ) )

U kunt meerdere animaties aan één element toewijzen; hun namen en parameters moeten in de volgorde van toewijzing worden geschreven:

element ( animatienaam: animatie-1, animatie-2; animatieduur: 2s, 4s; )

Het verbinden van animatie met een element gebeurt met behulp van twee opdrachten: animatienaam En animatie-duur.

Animatienaam

Eigendom animatienaam specificeert de naam van de animatie. Het wordt aanbevolen om een ​​naam te gebruiken die de essentie van de animatie weerspiegelt, en u kunt één of meerdere woorden gebruiken, aan elkaar gekoppeld door middel van een spatie - of een onderstrepingsteken _.

animatienaam: verplaatsing;

Tijdfunctie

Eigendom animatie-timing-functie Hiermee kunt u een speciale functie instellen die verantwoordelijk is voor de afspeelsnelheid van de animatie. Houd er rekening mee dat de afspeelsnelheid van de animatie meestal niet-lineair is, d.w.z. de momentane snelheid in verschillende gebieden zal verschillen. Op op dit moment Er zijn verschillende reeds ingebouwde argumenten voor deze regel: gemak, gemak-in, gemak-uit , gemak-in-uit, lineair , stap-start , stap-einde.

U kunt dergelijke functies echter zelf maken. Speciale functie kubieke bezier(P1x, P1y, P2x, P2y); neemt vier argumenten en bouwt op basis daarvan een waardeverdelingscurve tijdens het animatieproces. Op deze site kunt u oefenen met het maken van uw eigen functies en zien hoe ze werken.

Ten slotte kan de animatie met behulp van de functie worden omgezet in een reeks discrete waarden stappen(aantal stappen, richting), waarvan de argumenten het aantal stappen en de richting specificeren, die waarden kan aannemen begin of einde .

• gemak- standaardfunctie, de animatie begint langzaam, versnelt snel en vertraagt ​​aan het einde. Komt overeen met kubieke-Bezier(0,25,0,1,0,25,1).
• lineair— animatie vindt gedurende de hele tijd gelijkmatig plaats, zonder snelheidsschommelingen; komt overeen met kubieke-Bezier(0,0,1,1).
• gemak-in— de animatie begint langzaam en versnelt vervolgens geleidelijk aan het einde; komt overeen met kubieke-Bezier(0,42,0,1,1).
• gemak-uit— de animatie begint snel en vertraagt ​​geleidelijk aan het einde; komt overeen met kubieke-Bezier(0,0,0,58,1).
• gemak-in-uit— animatie begint langzaam en eindigt langzaam; komt overeen met kubieke-Bezier(0,42,0,0,58,1).
• kubieke-bezier(x1, y1, x2, y2)- zie hierboven.
• erven— neemt deze eigenschap over van het bovenliggende element.

Visuele vergelijking

Animatie met vertraging

Eigendom animatie-vertraging definieert de vertraging voordat de animatie begint te spelen, ingesteld in seconden of milliseconden. Een negatieve vertraging start de animatie vanaf een bepaald punt binnen de cyclus, d.w.z. vanaf het in de vertraging aangegeven tijdstip. Hierdoor kunt u animatie toepassen op meerdere faseverschoven elementen door alleen de vertragingstijd te wijzigen. Als u wilt dat de animatie vanuit het midden begint, stelt u een negatieve vertraging in die gelijk is aan de helft van de ingestelde tijd animatie-duur. Niet geërfd.

element ( animatienaam: animatie-1; animatieduur: 2s; animatie-vertraging: 10s; // 10 seconden gaan voorbij voordat deze animatie begint)

Herhaal animatie

Eigendom animatie-iteratie-telling Hiermee kunt u de animatie meerdere keren uitvoeren. Niet geërfd. Stel de waarde in op een positieve waarde 1, 2, 3 … enz. of oneindig voor eindeloze herhaling. Betekenis 0 of een negatief getal zorgt ervoor dat de animatie niet meer wordt afgespeeld.