Skip to main content
Workforce LibreTexts

1: An Introduction to Animating with CSS

  • Page ID
    20061

    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)

    ( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\id}{\mathrm{id}}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\kernel}{\mathrm{null}\,}\)

    \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\)

    \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\)

    \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    \( \newcommand{\vectorA}[1]{\vec{#1}}      % arrow\)

    \( \newcommand{\vectorAt}[1]{\vec{\text{#1}}}      % arrow\)

    \( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vectorC}[1]{\textbf{#1}} \)

    \( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)

    \( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)

    \( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)

    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    An Introduction to Animating with CSS

    Learning Objectives
    • Discover how animations work on websites

    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. 1

    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.

    See the Pen animation submit button by Valentin Galmand (@valentingalmand) on CodePen.

    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.

    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

    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.

    Explainer Videos

    “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 animation examples we saw previously were implemented through HTML, CSS, and sometimes even a little JavaScript. Explainer videos are created with high-powered software like Adobe After Effects, Adobe Animate, and Adobe Premier Pro. These videos can be fully animated in 2D or 3D, or they can utilize video shot in the real world. Let’s look at two 2D animation examples.

    The Google Wifi explainer video below is a great example of a short and sweet explainer video. Take a look.

    Loading Screens

    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.

    See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.

    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

    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

    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).

    microinteractions chart.png

    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 Logos

    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_sello_by_arnott.gif

    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:

    animated_logo_tyton_stoic.gif

    Summary

    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!


    This page titled 1: An Introduction to Animating with CSS is shared under a CC BY-NC 4.0 license and was authored, remixed, and/or curated by Rosemary Barker.

    • Was this article helpful?