Sprite Animation code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sprite Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"></div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: calc(900px / 8); height: 199px; background: url(456.png); animation: animate 1s steps(8) infinite; } @keyframes animate { from { background-position: 0; } to { background-position: -900px; } }
