An Introduction to Animating with CSS
- Discover how animations work on websites
Animations on the Web
Web animations are everywhere! You’ll find animations used to call attention to a particular item on a page or to confirm an action the viewer just took. Animations can give the viewer the sense of a real-world experience (like flipping the page in a book), or they can quickly explain how to bake a cake.
In the following sections, we’ll look at how these animations work a bit more closely. Let’s go!
Animations that Draw Attention
Websites frequently use a marketing technique called a call to action or a CTA for short. CTAs are little bits of text that encourage site visitors to take an action.
For example, you’ll see a button or a text link that reads “Purchase Tickets” or “Sign Up.”
Developers have noticed that, over time, site visitors get used to the layout of a page. The visitors don’t interact with CTAs like the developers would hope they would. So what is to be done? Why animate the CTA, of course! Motion draws the eye and encourages interaction. Watch the video below to see an example of a CTA. There is no audio in the video.
Footer Animation from Magnetism.fr
Here’s a footer animation from Magnetism.fr . Magnetism is a Web agency that creates everything from websites and apps to content. Their animation draws the eye down to the footer in a fun and unique way.
Nowy Teatr Calendar Animation
The following animation we’ll be looking at is a calendar animation from Nowy Teatr . The calendar reveals an image for the event you have hovered over. Displaying an image is a great way to catch a site visitor’s attention. Let’s see it in action below:
Confirming an Action with Animations
CodePen.io has a ton of outstanding animation examples, along with the code you would need to implement them. A lovely example of an elegant submit button with a confirmation action was created by Valentin Galmand . In the Live Code Editor below, hover over the submit button and click it to see the animation. Note - If the animation is sluggish, rerun it or view it on Codepen by clicking the “Edit On CodePen” link.
Upload Progress Microinteraction
This intriguing little upload progress animation caught my attention because it does three things. First, it shows that you have clicked the upload button by changing its shape to a circle. Then, you see a progress bar that lets you know how far along the upload is. Finally, a green check shows that the upload is complete. This combination of three animations enables the site to visitors understand what is happening. Note - If the animation is clipped on either side, hit the “0.5x” button to make it smaller and then press the upload button again.
Cause and Effect Illusions: Real World Experience in the Digital Format
Cause and effect illusions in the digital world come in many forms. For example, have you ever seen a page-turn animation? Turning the page of a book in the real world has a distinct look and feel.
Page Flip Animation
Let’s take a look at an example of a digital page turn. Pizzabote’s “ Book Page Flip Animation ” is a beautiful example of the technique. Be sure to view it at the 0.5 size for the full effect and click on the right half of the ‘book.’
Cause and effect illusions are found frequently in mobile devices. Any time you swipe or pinch, you are using one!
“One of the best benefits of motion graphics is communicating cause-and-effect to users, particularly with gesture controls on a mobile device. Think of Tinder’s iconic swiping—the animation of the page being dragged left or right strengthens the illusion of interactivity. It feels like you’re actually moving something. Imagine if, when you swiped, the screen just blinked and loaded a new profile. The app wouldn’t be anywhere near as fun." 11
Here’s a great little example of a swipe illusion for a camera app on the phone by Vincent Tantardini . You can see the swipe effect when the viewer chooses the camera speed. Be sure to save it on Dribble!
Pinch and Pan
The last example we will see of the cause and effect illusions is the “Pinch and Pan” created by Benjamin den Boer for Framer. Check out his work on Dribble.
“As the name suggests, an explainer video is a type of video that aims to inform the viewer in a short time, typically no more than 2 minutes. It uses various creative techniques to capture and keep attention, from colorful animation to storytelling. In marketing, they are an invaluable tool for building brand awareness in an easy-to-watch and memorable way.” 13
The Google Wifi explainer video below is a great example of a short and sweet explainer video. Take a look.
Loading screens are little animations you view while waiting for something else to happen. A great example of this would be the first screen you see when a video game is loading. 14
You can also find these screens after you click a button to login into a private section of a website. An excellent way to visualize this is to think of the process that happens when you log into your online banking.
Look at a few of these SVG Loader Animations from Nikhil Krishnan . Be sure to drag the gray scroll bar on the right of the embedded content below.
Pencil Pre-loader by Mantas Bačiuška
Pre-loaders are loading animations that happen before you enter a website.
This mesmerizing pre-loader animation works quite well because it can be fast and light which won’t require too much from the server.
Transitions are the animated changes between two pages, states, or views to provide visual continuity to the user interface. 14 The most creative Web transitions are inspired by what is happening in the video today. Let’s look at some ideas below:
The following example, the portfolio of Hisami Kurita , shows some lovely wipe transitions that use circles. I was also delighted by how the cursor interacts with items on the page. Take a look.
“Micro interactions are trigger-feedback pairs in which (1) the trigger can be a user action or an alteration in the system’s state; (2) the feedback is a narrowly targeted response to the trigger and is communicated through small, highly contextual (usually visual) changes in the user interface.” 13 They can be used to encourage engagement, display system status, help with error prevention, and communicate the brand to the consumer as well. 13
Here are some examples of what a micro interaction is (or is not as the case may be).
Micro interaction Example 1: Tab Bar by Abron Studios
This next short video shows a great little micro interaction when the tab bar is clicked. Notice the animation of the colors and tab name. Also, see how the entire tab bar wobbles slightly? That gives it a real-world illusion of being pressed, too. (No audio is present in the video.)
Micro interaction Example 2: Booking Interaction by Mauricio Bucardo
There is so much to love in this button micro interaction ! First, we see the button become slightly smaller when clicked. That click then launches the animation, and finally, we see the visual confirmation that the purchaser’s booking is now complete. This animation is gorgeous and very inventive.
The last things that I want to show you all today are some animated logos. These are self-explanatory as to what they are at this point in your career here at HACC. So, let’s dive into the examples!
Animated Logo Example 1: Sello Logo by Latham Arnott
Sello is a Swedish company that offers many different products from other companies. The logo reflects this by showing a wide variety of items that could be purchased. Take a look below:
Animated Logo Example 2: Tyton Logo by Sava Stoic
Tyton offers government services. Sava Stoic did an excellent job on this animation by drawing the shield first, then emphasizing the ‘T’ in the middle of the shield. After the main animation, the company’s shield is revealed, and the shield does an outward warp. Take a look:
I hope you enjoyed looking at the real-world examples of web animations! I am passionate about bringing you the best examples to help you understand what can be done.
"See" you in the next chapter!