1: An Introduction to Animating with CSS

Animations on the Web

Web animation is "motion on the web," which is achieved through different technologies and techniques, or by the combination of those. Motion graphics, Sprite animations, CSS animations, JavaScript animation, SVG animations, and WebGL animations are among the most common techniques, but we could extend this to include UI animations, web-based Game animations, and animated Data Visualizations. Other ways to conceive Web animation is through the use of GIFs, Java Applets, Flash, and Shockwave, but these technologies are being less and less used over the last years, or even deprecated. ¹

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:

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.

See the Pen Upload Progress Animation Microinteraction with GSAP by Takane Ichinose (@takaneichinose) on CodePen.

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." ¹¹

See the Pen Book page flip animation by Pizzabote (@pizzabote) on CodePen.

Swipe Illusion

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.

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.

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.

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: