Live Q&A: Tiffany Brown on CSS Animations, Transitions and Transforms. Oct 1, at 2pm (PDT)

[webinista]

@DCL10N3

I’m looking to create short form animation using a series of transforms and animations as opposed to incorporating a flash video for the specific purpose of mobile platform playback. How do you incorporate a .js, svg, and css transitions, transforms, and animations to make that feasible?

I’ll need to think about this a little more, could you tell me a little more about what you’re working on?

[Mittineague]

@webinista

accessibility concern

From what I’ve seen so far, animations transitions and transforms are used for “enhancement” and I’ve not noticed any use where if they broke for whatever reason UX would be affected. I assume the same type of rule as “don’t use images without some form of alternate text to convey the same message” applies.

Do you know of any potential problems in this regard?

[molona]

This is one of those topics that you always want to dive into but you never get the time to do it. I always found that animations were a bit tricky and hard to learn so I always gave up. But hey! Maybe my impressions are wrong and they’re not that tricky after all

CSS animations have greatly improved but most of the ones I’ve seen still include bits and pieces of JS (JQuery most of the time) so it looks to me that if you want to learn one, you have to learn the other

[kelle]

Hi Suzy, I can only really offer advice on the front-end side of things but I would think that basic HTML & CSS are an excellent place to start. With javascript, I think it’s always better to learn vanilla javascript first, and then introduce libraries so that students understand the difference between a language feature and library functionality.

Also helpful is pointing them towards the right resources (MDN is a great API reference I wish I’d had when I started out, for example).

[webinista]

@quizical

Would you recommend just using animation on desktop computers or on mobile? If on mobile what are the big issues to be aware of?

You can use animation on any device with a browser that supports it. If the device has a slower processor, you could conceivably run into some issues. But that’s something that (hopefully) you’ll discover during testing.

Now, if your audience includes a lot of Opera Mini users, do make sure that your animations and transitions use a fallback. Opera Mini doesn’t support transitions or animation of any kind whether CSS or JavaScript.

[webinista]

@Suzy_McKaskill

Hi I am late. Sorry. I am an instructor at a community college. I have been asked to research $ layout a web developement AAS (2 year degree) for web development. There are so many things to choose from that I am overwhelmed when trying to layout the curriculum. Any advice on a path for students to learn Web Development. I thought 1) html/css 2) JavaScript/JQuery 3) SQL … the main problems is which tools to use (Frameworks, CMS?)

This is a really broad question, Suzy. I think that’s a good path. HTML and CSS. I’d say teach JavaScript fundamentals rather than jQuery (or teach jQuery as part of JavaScript). SQL is still widely used, so that’s a good addition. I’d also add server-side programming language: Ruby and its Rails framework, Python and Django, and/or PHP + the Laravel framework. It’s also helpful to teach basic server configuration: Nginx or Apache. And roll a version management tool into the curriculum, ideally as part of a class on something else.

[Suzy_McKaskill]

Thank you so much. Vanilla JavaScript is a fantastic idea. How do you feel about angular, ember and backbone?

[Suzy_McKaskill]

@webinista

This is a really broad question, Suzy. I think that’s a good path. HTML and CSS. I’d say teach JavaScript fundamentals rather than jQuery (or teach jQuery as part of JavaScript). SQL is still widely used, so that’s a good addition. I’d also add server-side programming language: Ruby and its Rails framework, Python and Django, and/or PHP + the Laravel framework. It’s also helpful to teach basic server configuration: Nginx or Apache. And roll a version management tool into the curriculum, ideally as part of a class on something else.

Fantastic Advice. I am so grateful. Thank you for responding. I have to leave soon but before I skiddadle, Do you have a recommendation fro version management tool?

[webinista]

@Mittineague

Having accepted that “CSS is for style” it seemed wrong when I first saw CSS doing things that I would normally use JavaScript to do.

Now I wonder if the newer CSS is more "for those that don’t know JavaScript’ or if there are real advantages to be had.

I mentioned this as part of another answer, but there’s no harm in repeating it here. By using CSS for animation and transitions, you’re moving those tasks from the JavaScript thread to the graphics processing thread. When using JavaScript for animation, you run the risk of other JS operations being held up until the animation completes. With CSS, the JavaScript portion of your pages remain available. If you want to detect when an animation/transition is complete, you can do it asynchronously using the transitionEnd or animationEnd events.

Something else that I appreciate about using CSS animations is that you can combine them with media queries. An object may slide horizontally across a wide screen, but flip over on small ones (or something). And if the user has JavaScript blocked, animations will still work (apart from the event handling, of course).

[kelle]

Ember and Backbone are tricky because they require a pretty decent js background to use them well, imo.

Angular is quite good for beginners, especially if they’ve taken the time to understand the fundamentals of the language beforehand. One of the good things about angular (or bad depending on your perspective, but good for learning purposes) is that it comes bundled with a bunch of helpful things that ease people into some of the more important ideas in modern front end development.

At SitePoint we use React almost exclusively, so I’m pretty biased about view frameworks it’s definitely a steeper learning curve however!

[DCL10N3]

Essentially full-width, responsive music videos with the intention to incorporate augmented reality. But for the CSS purposes I want to be able to move characters around within a background “city” and frame it with transitions for a ~4 minute duration. Accomplishing this on code alone could also prevent copyright infringement as well as shrink the file size to be able to seamlessly view on as little bandwidth as a 3G network.

[webinista]

@el22or

What is your performance advice/concern when we use animations? What to use with care, what to avoid?

Avoid reflows wherever possible.

A reflow occurs when the dimensions of an object change, or its position changes. So instead of animating top, right, bottom, and left, use transformand thetranslatefunctions. Margins and borders are other properties that can cause a reflow. I haven't tested this, but I suspect that animatingoutlinemight be a good way to work around that. Animating thewidthandheightproperties of an object (including themin-/max-properties in there) can also trigger a reflow. Sometimes you have to, though; usingtransform: scaleX()or transform: scaleY()isn't always a good alternative to widthandheight`.

[webinista]

@Swigzell

You said jquery animations are jumpy but what about using something like velocity.js vs Css animations? The information on velocity.js says that it performs better on mobile then css animations.

That wasn’t me, that was @PaulOB :-). I’m skeptical of claims that JavaScript animations are ever faster than CSS. I admit, though, that I haven’t used velocity.js before. But my suspicion is that it would be on par with CSS animations depending on the browser and device.

[Swigzell]

Thanks for the reply. I did forward to @PaulOB but thanks for looking at it as well

[Suzy_McKaskill]

Kelle I appreciate your response. This has been a fantastic experience for me. I hope that I am notified in the future. I enjoyed this immensely !! My thanks to everyone

[angelamolina_old]

Two answers are better than one

[webinista]

@Mittineague

From what I’ve seen so far, animations transitions and transforms are used for “enhancement” and I’ve not noticed any use where if they broke for whatever reason UX would be affected. I assume the same type of rule as “don’t use images without some form of alternate text to convey the same message” applies.

Do you know of any potential problems in this regard?

Yes! There’s a pretty significant difference in how transitions work versus CSS animations. If the user’s browser doesn’t support CSS animations, the animation will completely fail. You’ll need to use a JavaScript fallback.

Transitions, on the other hand, will simply jump between the start and end states. The browser will ignore the transition-related properties. It’s not a pretty switch, but the UX won’t break.

Transitions and animations also need values that can be interpolated. You may have run into a situation of animating to or from height: auto, and found that it doesn’t work. That’s because the start and end values for a property need to be numeric, so that the browser can figure out the values in between.

I’d also recommend that you don’t tie a mission-critical action like an Ajax form submission to the transitionEnd or animationEnd events. A user interaction can prevent those events from being triggered.

[webinista]

@molona

This is one of those topics that you always want to dive into but you never get the time to do it. I always found that animations were a bit tricky and hard to learn so I always gave up. But hey! Maybe my impressions are wrong and they’re not that tricky after all

CSS animations have greatly improved but most of the ones I’ve seen still include bits and pieces of JS (JQuery most of the time) so it looks to me that if you want to learn one, you have to learn the other

You can definitely write CSS animations or transitions that work independently of JavaScript. Animations and transitions can be triggered by :hover, :focus, or :checked states.

In many cases, however, you’ll need to add or remove a class name in order to trigger an animation/transition. So, yes, you’ll need to learn at least a little bit of JavaScript (but just a little bit).

[angelamolina_old]

That’s a wrap!
Thank you to all who participated in today’s chat! A big thank you to @webinista for spending some time with us in the forums and getting around to all of your questions! Especially for hanging back for an extra 1.5 hours!

Please feel free to continue this discussion, this thread will be left open for you all.

[webinista]

@Suzy_McKaskill

Fantastic Advice. I am so grateful. Thank you for responding. I have to leave soon but before I skiddadle, Do you have a recommendation fro version management tool?

I’d recommend Git or Mercurial. SVN is another option, but it isn’t a pleasant one. There are services that offer one or more of them, and students can sometimes get free plans. Do a Google/DuckDuckGo search for hosted git or hosted mercurial and you’ll find a bunch.