I’ll need to think about this a little more, could you tell me a little more about what you’re working on?
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?
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
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).
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.
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?
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!
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.
Avoid reflows wherever possible.
A reflow occurs when the dimensions of an object change, or its position changes. So instead of animating
functions. Margins and borders are other properties that can cause a reflow. I haven't tested this, but I suspect that animatingoutline
might be a good way to work around that. Animating thewidth
properties of an object (including themin-
properties in there) can also trigger a reflow. Sometimes you have to, though; usingtransform: scaleX()
isn't always a good alternative towidth
Thanks for the reply. I did forward to @PaulOB but thanks for looking at it as well
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
Two answers are better than one
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
animationEnd events. A user interaction can prevent those events from being triggered.
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.
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.