How to Make a Custom Walking Animation Using Tailwind CSS

Apr 22, 2023

Introduction

This is a tutorial on how to make a custom walking animation with Tailwind CSS. At the end of it you’ll know how to make this walking boba:

What’s Tailwind?

Tailwind is a popular open source utility-first CSS framework, which means that it doesn’t provide you specific pre-designed components that you’re stuck with, but allows you to edit the style directly in an HTML file without going into CSS.

Prerequisites

You’ll need a basic knowledge of HTML and CSS, as well as:

Code Editor - A coding editor, for example Visual Studio Code
Tailwind - You can download TailWind with official documentation if you don't have
Image Files - You’ll need a couple of images that you want to turn into a walking animation. For example, I’m going to be using these 3 boba images because I like boba.

Setup Tailwind

1. Install Tailwind

Create a new project for your animation. On your terminal, run mkdir myProject and cd myProject

Run this line in your terminal:

npm install -D tailwindcss

Run npx tailwindcss init to create a Tailwind CSS Config file.

Open up this project in your code editor.

2. Configure Tailwind

Configure your template paths in the newly created tailwind.config.js file. A

/* tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

/* tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Create CSS file

We will now create the basic CSS file for this project. Create a folder called src and in the src folder, create a new file called input.css.

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

input.css

/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4. Start the Tailwind CLI build process

Run the CLI tool to scan your template files for classes and build your CSS.

terminal

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Setup HTML File

Make HTML File

Create a new file in your src folder named index.html. Insert the basic HTML code for a webpage.

<!-- index.html !-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Walking Boba</title>
    <link href="./output.css" rel="stylesheet" />
  </head>
  <body></body>
</html>

<!-- index.html !-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Walking Boba</title>
    <link href="./output.css" rel="stylesheet" />
  </head>
  <body></body>
</html>

Add Images

You want to move the image files you already have prepared in your src folder.

In this case the src folder should now look like

→ boba-idle-1.png

→ boba-idle-2.png

→ boba-idle-3.png

→ index.html

→ input.css

→ output.css

Making Tailwind Custom Animation

KeyFrame

Here is what the keyframe would look like in normal css:

@keyframes bobaWalk {
  0% {
    background-image: url(boba-idle-1.png);
  }
  25% {
    background-image: url(boba-idle-2.png);
  }
  50% {
    background-image: url(boba-idle-1.png);
  }
  75% {
    background-image: url(boba-idle-3.png);
  }
  100% {
    background-image: url(boba-idle-1.png);
  }
}

@keyframes bobaWalk {
  0% {
    background-image: url(boba-idle-1.png);
  }
  25% {
    background-image: url(boba-idle-2.png);
  }
  50% {
    background-image: url(boba-idle-1.png);
  }
  75% {
    background-image: url(boba-idle-3.png);
  }
  100% {
    background-image: url(boba-idle-1.png);
  }
}

Keyframes are what gives the control in CSS animations, and in this keyframe titled bobaWalk, I start with the picture of the standing boba (boba-idle-1.png) at 0%. Then at the time period of 25%, the frame will switch to a new image, in this case (boba-idle-2.png). At the halfway 50% point, it’ll go back to boba-idle-1.png and at 75%, the animation will look like boba-idle-3.png. Finally it closes with 100% back to boba-idle-1.png.

So all the frames of the animation will look like this:

Define KeyFrame in Tailwind

Now open the tailwind.config.js and add within the theme inside the extend, a keyframe named bobaWalk.

/* tailwind.config.js*/
keyframes: {
        bobaWalk: {
          "0%": {
            backgroundImage: "url('boba-idle-1.png')",
          },
          "25%": {
            backgroundImage: "url(boba-idle-2.png)",
          },
          "50%": {
            backgroundImage: "url(boba-idle-1.png)",
          },
          "75%": {
            backgroundImage: "url(boba-idle-3.png)",
          },
          "100%": {
            backgroundImage: "url(boba-idle-1.png)",
          },
        },

/* tailwind.config.js*/
keyframes: {
        bobaWalk: {
          "0%": {
            backgroundImage: "url('boba-idle-1.png')",
          },
          "25%": {
            backgroundImage: "url(boba-idle-2.png)",
          },
          "50%": {
            backgroundImage: "url(boba-idle-1.png)",
          },
          "75%": {
            backgroundImage: "url(boba-idle-3.png)",
          },
          "100%": {
            backgroundImage: "url(boba-idle-1.png)",
          },
        },

Define Animation in Tailwind

After the keyframes, you will also want to define the animation class. I’ve named it bobaWalk.

/* tailwind.config.js*/
      animation: {
        bobaWalk: "bobaWalk 0.9s step-end infinite",
      },

/* tailwind.config.js*/
      animation: {
        bobaWalk: "bobaWalk 0.9s step-end infinite",
      },

Then, the created animation line will be animation: bobaWalk 0.9s step-end infinite;

What does this mean?

It’s animation shorthand which contains animation: animation-name animation-duration animation-timing-function animation-iteration-count.

Animation-name: This is simply the name of the animation, and can be whatever you want it to be. In this case it references the created keyframe, so it’s bobaWalk.

Animation-duration: This is how long an animation takes to finish one cycle. You can adjust this to make a very speedy or lethargic boba depending on your preference. I’ve set it at a brisk pace of 0.9 seconds.

Animation-timing-function: This is the speed curve of the animation, which ensures that your frames move smoothly.

Animation-iteration-count: This is the number of times the animation iterates over before it stops. The walking boba’s journey is endless, which is why its set to infinite.

After adding in the keyframe and animation, your tailwind.config.js file will look something like this.

tailwind.config.js

/* tailwind.config.js*/
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      keyframes: {
        walking: {
          "0%": {
            backgroundImage: "url('boba-idle-1.png')",
          },
          "25%": {
            backgroundImage: "url(boba-idle-2.png)",
          },
          "50%": {
            backgroundImage: "url(boba-idle-1.png)",
          },
          "75%": {
            backgroundImage: "url(boba-idle-3.png)",
          },
          "100%": {
            backgroundImage: "url(boba-idle-1.png)",
          },
        },
      },
    },
  },
  plugins: [],
};

/* tailwind.config.js*/
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      keyframes: {
        walking: {
          "0%": {
            backgroundImage: "url('boba-idle-1.png')",
          },
          "25%": {
            backgroundImage: "url(boba-idle-2.png)",
          },
          "50%": {
            backgroundImage: "url(boba-idle-1.png)",
          },
          "75%": {
            backgroundImage: "url(boba-idle-3.png)",
          },
          "100%": {
            backgroundImage: "url(boba-idle-1.png)",
          },
        },
      },
    },
  },
  plugins: [],
};

Calling Tailwind Custom Animation

Now that you’ve created it, you can go ahead and call it in your HTML file!

Add <div class = "animate-bobaWalk bg-no-repeat" style='height:300px width:300px;'> </div> to your index.html file inside the body. The animate-bobaWalk calls your created animation from tailwind.config.js, and the bg-no-repeat class is an added tailwind utility so you don’t have to repeat the boba.

<!-- index.html !-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Walking Boba</title>
    <link href="./output.css" rel="stylesheet" />
  </head>
  <body>
    <div
      class="animate-boba bg-no-repeat"
      style="height:300px;width:300px;"
    ></div>
  </body>
</html>

<!-- index.html !-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Walking Boba</title>
    <link href="./output.css" rel="stylesheet" />
  </head>
  <body>
    <div
      class="animate-boba bg-no-repeat"
      style="height:300px;width:300px;"
    ></div>
  </body>
</html>

And with that, you’re done! Now you have displayed a walking boba and an animation you can call show wherever on your webpage :)

Blog