5 Replies Latest reply on Aug 23, 2014 10:29 AM by healdprice

    CSS3 Animations


      I am a developer and I understand that for heavy animations you may need multiple javascript libraries but I think with the rise of CSS3 there should be a option to have a "light" or "CSS Based" Animation Project where it is only CSS3 Animations and Transitions with jQuery. I understand that this is a big change just to have CSS based animations but I think designers should be able to take advantage of new web technologies. I love putting small animations in my websites but they are small and there for I don't want to load anything more on my page than I have to. CSS3 is very capable of many types of animations if used correctly and I think it will increase the use of Animate.


      What do you think of having a "CSS Based" Animation?

      What would you do?

        • 1. Re: CSS3 Animations
          TimJaramillo Level 4

          This is quite a fiery topic. Coming from a Flash/JS background, I'm definitely biased on this discussion. In my mind, CSS is a formatting tool, and shouldn't be used for logic/animation. From my biased perspective CSS animations should be limited to button rollover animations.


          Here's an interesting article comparing greensock JS to CSS3 animations (I know it's slightly off-topic regarding Edge Animate, but it's good read, and highlights some of the shortcomings of CSS3 animations):


          1 person found this helpful
          • 2. Re: CSS3 Animations
            GreenSock Level 1

            One more [somewhat biased] article that might be helpful: http://css-tricks.com/myth-busting-css-animations-vs-javascript/


            CSS is great for simplistic stuff like rollovers, but there are inherent shortcomings in the technology that make it ill-suited for professional-grade animation. So I think it'd be tough for a tool like Edge Animate to offer a "light" or "CSS based" mode because that would entail removing so many options from the user (wanna animate along a path? Sorry. Wanna animate the scale and rotation in a staggered way? Nope, can't allow that...etc.) There are all sorts of conditions the program would have to watch out for, protecting the user from animating things in ways that CSS can't allow...I imagine it'd be frustrating for both the user and Adobe.


            The bread-and-butter of every animator involves changing position, scale, and rotation but since those are all mashed into a single "transform" CSS property, and there cannot be separate eases for each component, it's a deal-breaker for a tool like Edge Animate that offers a timeline where folks can animate individual transform components.


            In theory, CSS sounds good. When you dig into the technical details, it becomes clear that it's not feasible for anything but simplistic things.

            1 person found this helpful
            • 3. Re: CSS3 Animations
              lukemack Level 1

              I was hoping to be able to use edge animate to create a loading 'spinner' in pure css3. For that use case, I feel using jquery (although I will actually already have jquery on the page) might be overkill. Can you confirm that Edge does not have a css3 only export option in the latest version? I currently have 1.5.

              • 4. Re: CSS3 Animations
                TimJaramillo Level 4

                Hi there, Edge Animate does not export CSS3. Is there a reason why you want to use only CSS3? The easiest, most straightforward way to build a spinning loader is via an animated gif (Edge has built-in loader functionality, but the only way to add animation to the Edge loader is to use an animated gif, as all the reliant libraries haven't been loaded when the loader is shown.


                If your loader is not being used in an Edge project (are you looking for a standalone animation for some other type of html app?), I'd also look into Greensock- it's super simple to rotate a div:

                TweenMax.to( '#myDiv', 1, { rotation:360, repeat:-1 } );


                GSAP: Professional-Grade HTML5 Animation « GreenSock

                • 5. Re: CSS3 Animations

                  I would start with this tutorial: animation in CSS3, everything what you need to know about animation in CSS3, is written there. Specially keyframes which is a base for any complex animation in CSS3.