Hello guys in this tutorial we will create character walking animation using HTML & CSS
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Simple Walking Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta https-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css" /> </head> <body> <h2 align="center">Hover to pause</h2> <div class="animation_outer"> <div class="animation"></div> </div> </body> </html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* { padding: 0; margin: 0; } body { display: flex; align-items: center; justify-content: center; height: 100vh; } .animation_outer { display: flex; align-items: center; } .animation { width: 184px; height: 325px; background-image: url(texture.png); margin: 0 auto; animation: walk 1s steps(8) infinite; } @keyframes walk { from { background-position: 0px; } to { background-position: -1470px; } } .animation:hover { animation: unset; }