CSS vs Javascript Animations

Avem o intrebare veche de cand lumea: animatii in CSS sau Javascript?

Si avem un om care incearca sa raspunda la intreabarea asta:

https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript

Parca am mai avut odata discutia pe forum despre treaba asta da nu am gasit topicul.

Deci care e parerea comunitatii?

Personal eu le folosesc pe amandoua in functie de caz.

De obicei folosesc animațiile JS atunci când am nevoie de ceva sincronizat (e.g. când se termină o animație începe alta) sau când animațiile sunt necesare și pe IE<9. Iar când fac asta folosesc .animate() din jQuery.

1 Like

Eu folosesc animatii js, prin jquery, intotdeauna. Iar prin animatii sper ca nu ne referim doar la schimbarea unei culori.

Ai incercat asta? Merge si cu jQuery.

Il aveam pe la notite. Dar nu cred ca vreau sa vad asa ceva vreodata prin codul meu:

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
2 Likes

Acum doi ani am făcut asta. La momentul respectiv mi-a funcționat ireproșabil. Habar n-am dacă mai merge acum :slight_smile:

1 Like

Animatiile CSS mi se par mult mai fluente. Si prefer sa le folosesc pe acestea. Dar folosesc jQ pentru a adauga clasele care au animatii atunci cand am nevoie de o animatie.

Sunt sigur ca nu sunt singurul care s-a gandit la metoda asta. Eu as face asa:

Sa presupunem ca .animatia_necesara este o tranzitie sau are keyframe-uri.
Sa presupunem ca #elementul_ce_trebuie_animat are deja o tranzitie / keyframe-uri setate. Care dureaza 0.5s. Tu vrei sa inceapa a 2 a animatie [despre care vorbim] dupa ce se termina prima. Tot ce trebuie sa faci este sa astepti 500 ms.

$( "#elementul_ce_trebuie_animat" ).delay( 500 ).addClass( '.animatia_necesara' );

Sunt mai multe metode de a face asta. Am prezentat doar una.

2 Likes

Avantajul în a extrage animațiile din JS în CSS ar fi fost o separare foarte clară (CSS este ar fi strict pentru design, JS strict pentru funcționalitate). Nu s-ar fi călcat pe bătături, toată lumea ar fi fericită.

Ce se întâmplă în soluția ta se numește, în limbaj popular, strong coupling. Dacă din juma’ de secundă vreau să cresc durata la 750ms va trebui să modific CSS și JS. Iar aici avem o problemă. Pentru situații de genul ăsta prefer totuși animațiile din JS.

Cazurile în care folosesc animațiile CSS sunt destul de limitate și, de cele mai multe ori, sunt situații banale (gen schimbarea unei culori în altă culoare la un buton, un fade in pentru un meniu șamd) care dacă nu funcționează (browser support) nu schimbă cu nimic funcționalitatea propriu-zisă (un buton care își schimbă culoarea brusc vs unul care o schimbă progresiv nu afectează site-ul în nici un fel; un popup care apare mai devreme de cât ar trebui însă, s-ar putea să afecteze)

1 Like

Ok lasam strong coupling … si sunt de acord cu tine ca trebuie sa modifici in 2 locatii separate variabila care reprezinta timpul de animatie so i present you another solution:

var animation_time = 750;
var animation_type = ease-in-out;

$('.elementul_de_animat').css({
    "-webkit-transition": "all " + animation_time + "ms " + animation_type,
});

Astfel ai flexibilitatea jQ cu smooth animations de la CSS si Modifici ce vrei o singura data. Da bine poti sa faci codul de mai sus mai frumos, mai dragut, mai fancy, poti sa faci tot css-ul o variabila compusa or whatever. Dar tot as prefera o astfel de metoda in schimbul .animate(); Nu stiu mi se pare clunky, lagy cu frame rate scazut.

Exemplul mai sus mentionat este folosit foarte mult in unele plugin-uri de jQ pentru PARALAX sau in plugin-uri tot de jQ pentru One Page Websites.

1 Like

Vad ca nu a mentionat nimeni de Velocity.js and a nice guide

1 Like

recent am folosit la un client pentru animatie http://spritely.net/
foarte simplu de folosit, merge si pe mobile, necesita jquery si multa imaginatie.
cu putin efort se pot face si jocuri online pe baza lui. (aveti acolo exemple si codul sursa)

1 Like