This is the editorial from our latest HTML/CSS Channel newsletter, you can subscribe here.
Here are our latest front-end treats:
- 20+ free front-end learning resources from Louis Lazaris
- A brand new course on CSS animation by Donovan Huchinson
Front-end Learning Resources
As front-end developers, it’s our job to stay abreast of the techniques and tools that make our final products easy to use, accessible and, why not, beautiful.
Louis Lazaris shares with us the 11th installment of his list of free 20+ docs and guides for front-end developers.
The list is impressive and includes resources on functional programming, ES6, Progressive Web Apps, accessibility, and more. Feel free to pick your favorites. As for me, the CSS Reference and the the Typography Handbook are the ones I immediately checked out.
CSS Reference
The CSS Reference is a visual guide where CSS properties are organized into:
- Animations
- Backgrounds
- Box model
- Flexbox
- Positioning
- Transitions
- Typography
You can also access a list of all CSS properties in alphabetical order.
The guide explains each property and possible values in clear and simple terms and offers great visuals to illustrate the results.
The Typography Handbook
Any tool that teaches principles, best practices and code for great web typography in a practical and accessible way has my vote. It seems to me that The Typography Handbook does just this.
This is an open source project on GitHub covering:
- Typographic Design
- Fonts
- Web Style Guide
The last part in particular shows a fair amount of code samples focusing on topics such as relative units, vertical space, font size, color, etc.
If you find most resources on web typography a bit intimidating and jargon-laden, The Typography Handbook will surprise you (totally in a good way).
Web Animation
We’ve evolved to be really good at noticing movement. … Observing movement and visual cues enable us to understand complex actions and ideas in a nonverbal way.
Animation on the web can be leveraged to the same effect and can add extra depth and meaning to the conversation between our users and the User Interface.
Bringing Websites to Life with CSS Animations — Donovan Hutchinson & Guy Routledge
Animation has become a key ingredient in web design and development. User interface designers teach us how subtle animation effects help users perform tasks on a website, prevent boredom when visitors wait for a resource to load, guide readers’ attention as they scan web content.
At this time, the most common ways of animating web content are:
- CSS transitions and @keyframes animation
- JavaScript
To learn more about web animation, SitePoint Premium offers a brand new course — Animating with CSS — by animator rockstar Donovan Hutchinson.
The course covers the principles of effective user interface animation and their implementation using CSS transitions and @keyframes, easings and timing functions, multiple animations, animations on scroll, browser support and accessibility.
If you prefer articles, below are just a few of my favorite ones from SitePoint:
- Animation Advice from a CSS Master. This is the transcript of SitePoint’s live Q&A with Tiffany Brown, presented by Angela Molina
- 4 Tips for Using Animation in Design by Gabrielle Gosha
- Understanding the CSS animation-fill-mode Property by Louis Lazaris
- Animations: Using Easings to Craft Smarter Interactions by Daniel Schwarz
- Bringing Pages to Life with the Web Animations API by Dudley Storey.
Using CSS for web animation remains my preferred way of doing things, but there are instances when you need a robust JavaScript library to get the job done.
For complex web animations requiring a JS solution, check out my series Beyond CSS: Dynamic DOM Animation Libraries. The first installment is an introduction on how to work with Anime.js and the second installment is about animating the DOM with KUTE.js, a modular and open source animation engine with lots of capabilities.
Stay tuned, more is to come.
If you have a JavaScript animation library you’d like to see in this series, get in touch!
Featured image courtesy of Unsplash.com
Frequently Asked Questions about CSS Animation
What is the difference between CSS transitions and CSS animations?
CSS transitions and CSS animations are both powerful tools for creating smooth, engaging animations on your website. The main difference between the two lies in their level of control and complexity. CSS transitions are simpler and are used for creating simple animations that occur as a result of a state change, like hovering over an element. CSS animations, on the other hand, offer more control and complexity. They allow you to create more intricate animations with multiple steps and stages, and they can run independently of any user interactions.
How can I start learning CSS animations?
There are many resources available online to help you start learning CSS animations. Websites like Udemy, Scrimba, and Codecademy offer comprehensive courses on the topic. You can also refer to the Mozilla Developer Network (MDN) documentation for a more technical and detailed guide. Practice is key when learning CSS animations, so make sure to apply what you learn through projects and exercises.
Can I use CSS animations on any website?
Yes, CSS animations can be used on any website. However, it’s important to note that not all browsers support all CSS animation properties. Therefore, it’s always a good idea to check the compatibility of the CSS properties you’re using to ensure your animations work across all browsers.
Are CSS animations resource-intensive?
CSS animations can be resource-intensive if not handled properly. However, by optimizing your animations and using properties that trigger the least amount of repaints and reflows, you can create smooth, efficient animations that don’t significantly impact your website’s performance.
What are keyframes in CSS animations?
Keyframes are used in CSS animations to define the stages of the animation. They allow you to specify the styles of the element at various points throughout the animation, creating a sequence of animation effects.
How can I make my CSS animations responsive?
To make your CSS animations responsive, you can use media queries to adjust the animation properties based on the screen size. This allows you to create animations that look and work well on all devices, regardless of their screen size.
Can I combine CSS animations with JavaScript?
Yes, you can combine CSS animations with JavaScript to create more complex and interactive animations. JavaScript can be used to control the timing, sequence, and behavior of the animations, providing a greater level of control and interactivity.
How can I debug my CSS animations?
Debugging CSS animations can be done using the developer tools in your browser. These tools allow you to inspect the animation properties, check the timing, and view the animation sequence in slow motion.
Can I use CSS animations to improve the user experience on my website?
Absolutely! CSS animations can greatly enhance the user experience on your website by adding visual interest and interactivity. They can be used to guide the user’s attention, provide feedback, and create a more engaging and dynamic user interface.
Are there any limitations to using CSS animations?
While CSS animations are a powerful tool, they do have some limitations. They can be resource-intensive, especially for complex animations, and not all animation properties are supported by all browsers. Additionally, creating complex animations with CSS can be more challenging and time-consuming compared to using JavaScript or other animation libraries.
Maria Antonietta PernaMaria Antonietta Perna is a teacher and technical writer. She enjoys tinkering with cool CSS standards and is curious about teaching approaches to front-end code. When not coding or writing for the web, she enjoys reading philosophy books, taking long walks, and appreciating good food.
