17

Ask DN: Do you use CSS or JS for animations/transitions?

5 years ago from , Creator of Noon Pacific :: Designer + Developer

For all you designer-developers out there, do you prefer using css transitions/animations or javascript to accomplish what you want? or a mix of both? Also, what resources have you found useful in learning these skills?

Thanks!

32 comments

  • Dan KlammerDan Klammer, 5 years ago (edited 5 years ago )

    Definitely CSS triggered by a toggle class when possible. I feel it's the smoothest and gives you the best experience. When CSS can't do the trick, I fallback to JS.

    I am always inspired by Codrops' CSS animation demos. Mary Lou is a magician with this stuff! http://tympanus.net/codrops/category/playground/

    18 points
    • Clark Dinnison, 5 years ago

      Big fan of codrops too. Thanks for the toggle tip.

      1 point
    • Wesley HainesWesley Haines, 5 years ago

      toggle.. can't wait to start using that

      1 point
    • Andy SmithAndy Smith, 5 years ago

      Also a big fan of codrops! I've actually built a few mini sites based on simple ideas from that site! Always inspiring.

      1 point
    • Tom DurkinTom Durkin, 5 years ago

      +1 for codrops. I take the same approach as well. JS to add classes etc then CSS to actually do the magic stuff.

      0 points
  • Manik RatheeManik Rathee, 5 years ago

    CSS to animate, JS to toggle animations (in most cases)

    To learn it, I would suggest grabbing animate.css from Daniel Eden and just playing around while reading the source.

    Easy way to get an understanding of more robust animations, keyframes, etc.

    11 points
  • Mike ProMike Pro, 5 years ago (edited 5 years ago )

    I've switched all my animation workflow to Velocity. That's the most maintainable solution for large scale app UI. It's performance is amazing also, faster then Transit and regular CSS transitions. http://julian.com/research/velocity/ and http://css-tricks.com/improving-ui-animation-workflow-velocity-js/

    8 points
  • Julian ShapiroJulian Shapiro, 5 years ago

    Velocity.js for JS based animation. Works back to IE8 and Android 2.3, and it's blazing fast while offering a ridiculous amount of features in a small package: http://VelocityJS.org.

    I may or may not be biased.

    8 points
  • Julian LloydJulian Lloyd, 5 years ago

    CSS Transitions are incredible; Transitions handle the majority of my animation needs, and they naturally handle bi-directional animations.

    CSS Keyframes offer a little more control, but are a little hard to wrangle for more complex/specific animations. They also take a little wizardry to get bi-directional animation the way you want.

    JavaScript Animation Libraries appear fantastic. I’ve been looking at Greensock (and similar libraries) a lot lately, as they claim (and rightly appear) to be faster than CSS-powered animation… but I would likely take this approach for animations that require specific timing and more complex choreography (perhaps fancy UI view/state transitions…)

    4 points
  • Victor LVictor L, 5 years ago (edited 5 years ago )

    I use JS to toggle a "visible" class when an object scrolls into a user's view, then CSS to animate an object.

    3 points
  • Petr TichyPetr Tichy, 5 years ago (edited 5 years ago )

    I am a big fan of Greensock for creating a more advanced timelines and tweens. CSS3 animations can also be very handy for some simple but elegant effects.

    These guides might help you to get started with both CSS and JavaScript animation libraries:

    2 points
  • Chris GriffithChris Griffith, 5 years ago

    I typically like to use CSS for the actual animations because it really is much faster, but I use JS when I need more than hover, active, or focus states.

    This is a really cool, simple to use library that sets up a bunch of animations. I've found it really helpful for a number of projects.

    http://daneden.github.io/animate.css/

    2 points
  • Pedro Ivo HudsonPedro Ivo Hudson, 5 years ago

    CSS to animate and JS to toggle animations.

    1 point
  • Nathan CooperNathan Cooper, 5 years ago (edited 5 years ago )

    I use CSS for transitions and animations. The application I develop for uses AngularJS, so I use its classes, e.g., ng-enter and ng-leave, as needed for triggers when CSS alone won't work.

    I use LESS for CSS and have made a number of mixins for commonly used transitions and animations. Some of those, specifically animations with keyframes are custom, for others I have used pre-made animations from Animate.CSS

    I recently discovered AniJS. It has a simple declarative syntax using the "data" attribute. It makes it relatively simple to create complex animation events that likely wouldn't be possible with CSS alone. The only discouraging thing for me about AniJS, is that its logic is inline. That could potentially become a maintenance issue or create unexpected results when events trigger multiple animations on a page at once. Regardless it's fun to play with and I recommend checking it out for prototyping if nothing else.

    1 point
  • Nathan ManousosNathan Manousos, 5 years ago (edited 5 years ago )

    I use jQuery Transit for a lot of stuff. It allows you to use the jQuery animation api but uses CSS animations to power them.

    It also conveniently allows you to use numbers in your CSS values, like this:

    $('.foo').css({width: 10})
    1 point
  • Justin MichaligaJustin Michaliga, 5 years ago

    Also, don't forget to Hardware Accelerate those CSS Animations (use translate3d as opposed to translate) to get super crisp animations on mobile devices.

    1 point
  • Benny JienBenny Jien, 5 years ago (edited 5 years ago )

    When animating stuff, what I am looking for is the balance between performance and ease to maintain.

    I use CSS animation if: 1. The animation is triggered by hover. 2. The animation properties are rotate, scale, transform, opacity, and color/background-color.

    Other than that I prefer to use Velocity.js.

    1 point
  • Dirk HCM van BoxtelDirk HCM van Boxtel, 5 years ago

    Do you use CSS or JS for animations/transitions?

    Yes.

    They're tools, and I use them both. And together. Pretty much as others mentioned, plus the fact that in some cases CSS will do, and in others JS is required.

    0 points
  • Chris PorterChris Porter, 5 years ago

    Same with the rest. CSS for transitions and animations. Then JS to initialize these animations if needed. Animate.css is one resource and then prototyping in CodePen to test.

    0 points
  • Derryl CarterDerryl Carter, 5 years ago

    Flash

    0 points
  • Henrique Alves, 5 years ago

    I'm using Animate.css

    0 points
  • Zethus SuenZethus Suen, 5 years ago

    It really depends. I generally go prefer CSS animations since they are rendered natively in the browser (C++ runs faster than V8 Javascript). However, sometimes there are cases where you want to mux in javascript for selector/scroll/waypoint reasons.

    Ultimately, CSS renders faster in browsers. JS serves a nice toolkit when CSS spec can't get the job done.

    0 points
    • mewo a, 5 years ago (edited 5 years ago )

      Only certain CSS properties are hardware accelerated and some transforms in javascript can be handed to the GPU as well. Each browser handles them slightly differently too. Also a lot of the performance tests you come across on the web will pit CSS animations against JQuery which is slow.

      0 points
      • Zethus SuenZethus Suen, 5 years ago

        You are right. I stand corrected. I meant to specifically target jQuery and not generalize to all of JS. +1.

        1 point
  • Nick MNick M, 5 years ago

    CSS wherever possible.

    0 points