Walking Boba

# 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](https://tailwindcss.com/) 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](https://code.visualstudio.com/) - Tailwind - You can [download](https://tailwindcss.com/docs/installation) 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 ```jsx /* 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 ```css /* 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. ```html Walking Boba ``` ### 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: ```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 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:

25%

50%

75%

100%

### Define KeyFrame in Tailwind Now open the `tailwind.config.js` and add within the theme inside the extend, a keyframe named `bobaWalk.` ```js /* 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.` ```js /* 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](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function):** This is the speed curve of the animation, which ensures that your frames move smoothly. **[Animation-iteration-count](https://developer.mozilla.org/en-US/docs/Web/CSS/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 ```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: [], }; ``` # Calling Tailwind Custom Animation Now that you’ve created it, you can go ahead and call it in your HTML file! Add ``

`` 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. ```html Walking Boba

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

# Resources - View this code on [codepen](https://codepen.io/annexxx/pen/poBdbLV) - [CSS Animation Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) - [Tailwind Animation Documentation](https://tailwindcss.com/docs/animation)

Blog

How to Make a Custom Walking Animation Using Tailwind CSS

Apr 22, 2023