Lately I've been studying some animations with CSS. However, by researching more about the subject, I ended up checking that it is possible to do animations also with javascript.
I know that CSS animations limit depending on the browser, so does JavaScript?
CSS3 , is not yet ready for professional-level animations on large, scalable projects. For simple things, - CSS3 is the winner, we can not even argue about it. If you are looking for animations mais robustas let's look at the following points:
Imagine that you spent nights writing amazing, cutting-edge animation codes in pure CSS3. And now - here comes the hard part. You want to control them - pause, stop, go back, executed asynchronously, one after another, put in a timeline and time. Well, good luck with that. Literally, it is almost impossible. With javascript solutions (like GSAP) it's easy to make a pie! Write some lines of javascript code and you're good to go!
Imagine you want to scale a div and in the middle of that animation, begin to rotate it and change the border color. You can not animate individual properties distinctly. However, JS-based solutions let you literally animate any numeric property in a variety of ways (just write animate for 50% of the initial width, animate for 0px, animate for -50px and then 150px). >
Code for larger projects can easily change and you may have to write complex animations, that's when the code organization is the key! With CSS3 it's almost impossible to group your animations into logical chunks to manage easily, just by calling methods and callbacks.
CSS3 transitions do not work in older browsers. And more - each browser handles them differently (and adds its own errors to your application). With few animations on your page it is probably easier to verify that everything runs smoothly, but it can become impossible once you go for a larger project. Javascript solutions provide an abstraction layer. You do not have to worry about browser-specific behaviors here's where the libraries are doing their job!
Is CSS animation "bad"? Certainly not! In fact, they are great for simple transitions between states (such as rollovers), when compatibility with older browsers is not required. CSS does transformations very well, and CSS animations can be very appealing to developers who prefer to put all of their animation and logical presentation in the CSS layer. However, JavaScript-based animation offers much more flexibility, better workflow for complex and interactively rich animations, and often performs as fast (or even faster) than CSS-based animation.
css3:
js:
In this site has a nice comparison, with animations, performance testing and a lot more! Take a look.
