CSS Animation
Simple interactions to help our users.
Art cLASSes FOR THE CHILDREN
Here we have a non-profit doing the excellent job of teaching art classes to children, who’s proceeds go on to teach art to underprivileged children in the community. One of their classes was focused around clay, where you can make a hand print out of clay. This is a simple animation using opacity and scale to give the illusion of indentation.
Building the Page
What do you do when you have a page that’s slow to load? Isn’t it frustrating for your users? When I can’t fix the underlying problem, I like to delight my users with fun loading graphics. In this example for BCBSLA, I have the iconic symbols of the blue cross and blue shield being built as the user watches, implying the website being built in the background. It helps pass time and implies progress.
Wiggle on Hover
Ever have a button that’s disabled? How do you show this to the end user? Do you use color, or perhaps a bit of transparency? In this solution, I created a button that would “wiggle” on hover, as if it was shaking the curser off of it. Speaking of the cursor, I always try to include the correct cursor with a button. In this case, I used the disabled cursor as a third level of identification that the button is not clickable.
Interaction is key
Interaction is so important when designing for the web. What should happen when a user hovers over a link. How do they know it’s clickable? How do they know that the hover worked or that the click worked? I believe in adding different states, to links to help emphasize that yes, the application is there and responding to your commands. Good design is a conversation between your user and the website.
Responsive Layouts
How do I like to build layouts? Simple:
Mobile First
Responsive
Using ems and variable units
SCSS
HTML5
Type, Type, & Type
This was one of my earliest experiments with CSS Animation, yet it remains my most popular code snippet on codepen. This animation is of me writing a bit of code where I have each letter animated separately, similar to stop action animation, to create the illusion of typing.
Waiting for the Plane to Arrive
Oh No! A loading Screen! In a perfect world, a user should never see a loading screen. Well, we don’t live in a perfect world, and I have years of experience dealing with massive amounts of data and the ramifications that entails for our users. Having a loading animation that is fun and beautiful may be just the thing your user needs to brighten their day.
Waves
Since I’ve begun experimenting with CSS Animation, I’ve always wanted to figure out how to animate water with SVGs and CSS Shapes. These undulating waves are animated using CSS Animation.
Air Flow in an Engine
What a bad experience it is for a user to land on a 404 or a 500 level page, right? Well, I think this is a perfect opportunity to speak clearly to your user, to explain how they happened to get on an error page, and a great time to help them get back to the home page and perhaps get some user feedback.
SVG Icons VS CSS SHAPES
Can you tell which icon was made as a SVG and which icon was made as CSS Shapes? Both solutions do not make a secondary call to an image asset, but are instead created in the browser by either reading the inline svg code, or applying the css to a container.