Join Val Head for an in-depth discussion in this video Vendor prefixes and browser support, part of CSS: Animation.
- You won't be seeing any vendor prefixes written in the exercise files for this course. But that's not to say they aren't needed entirely. At the time of this recording the most recent versions of IE Edge, Firefox, Chrome, Safari, and others all support CSS transitions, CSS animations, and CSS transforms in their un-prefixed version. You can see here on caniuse.com the listings for each. CSS transitions are all green with no prefixes indicated and the same goes for CSS animation, CSS 2D transforms, and even CSS 3D transforms.
That's really great news. However older versions of these browsers, even ones from just a few months ago still require prefixes to support transitions, animations, and transforms. So in a production environment you will need to consider your prefixes. And the best way to do this is to have your prefixes dealt with automatically as part of your build process. Personally I like to use something like Autoprefixer in my production work. It works behind the scenes to add the necessary prefixes when you compile your CSS file. CSS-Tricks has a really great article here explaining what Autoprefixer is and how it works.
If you're using something like CodeKit, which is what I like to use, you can set up Autoprefixer to apply prefixes for specific browsers and decide how far back you'd like to go in the support of your prefixes. Autoprefixer uses the caniuse.com API to keep up to date and be sure it's only printing out the prefixes that you actually need. This helps keep your final production code from getting unnecessarily cluttered. All in all it's a really great tool. Regardless of how you choose to handle your vendor prefixes visit caniuse.com from time to time to keep up on which prefixes are needed and for which browsers.
It's a really great source to keep up to date on all of these things.
Web designer Val Head introduces CSS transforms and transitions—the foundation of most CSS animations—and shows how to keyframe simple animations and adjust their timing, fill, and direction. She also covers looping and chaining animations, animating HTML and SVG elements, and optimizing animation performance, and introduces the best tools and use cases for CSS animation. Start watching to get your brand in motion.
- Using CSS transforms and transitions
- Working with animation-delay and animation-fill-mode
- Timing and easing CSS animations
- Animating elements in place
- Animating sprite images
- Animating CSS transforms and transitions
- Chaining multiple animations
- Animating SVG images
- Creating high-performance CSS animations