Sprite Animation
How do I make an sprite animation?
Use a sprite and shift the background position in a CSS animation loop.. What is a sprite animation? How do you make a sprite animation? This script and codes were developed by Jeff Scott Ward on 28 August 2022, Sunday.
Sprite Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sprite Animation</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .hi { width: 50px; height: 72px; background-image: url("http://files.simurai.com/misc/sprite.png"); animation: play 0.8s steps(10) infinite forwards;
}
@keyframes play { from { background-position: 0px; } to { background-position: -500px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <img src="http://files.simurai.com/misc/sprite.png"/>
<div class="hi"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Sprite Animation - Script Codes CSS Codes
.hi { width: 50px; height: 72px; background-image: url("http://files.simurai.com/misc/sprite.png"); animation: play 0.8s steps(10) infinite forwards;
}
@keyframes play { from { background-position: 0px; } to { background-position: -500px; }
}
Sprite Animation - Script Codes JS Codes
(function() {
}).call(this);
![Sprite Animation - Script Codes](http://shots.codepen.io/jeffscottward/pen/qdBpx-512.jpg)
Developer | Jeff Scott Ward |
Username | jeffscottward |
Uploaded | August 28, 2022 |
Rating | 3 |
Size | 2,669 Kb |
Views | 48,576 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Iso-Metric Snake | 5,511 Kb |
Trader Phone APP UI | 6,799 Kb |
Panning Wall Tiles | 2,822 Kb |
3D Hexagon Text Roller | 2,289 Kb |
Pure CSS Responsive Slider | 5,404 Kb |
Object Oriented SASS Framework | 8,564 Kb |
Impress JS Algorhytmic Generator | 7,906 Kb |
A Pen by Jeff Scott Ward | 696,840 Kb |
XBOX 360 UI | 9,781 Kb |
Brick Breaker | 3,547 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
C.Rowe Button | Brownerd | 2,473 Kb |
Pictos font library from CodePen | Jstam | 3,790 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
Toolbar | Onsen | 5,414 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
Underlined form fields | Mitchdot | 2,323 Kb |
Faux column absolute wrapper | Yurimorini | 1,823 Kb |
Three js | Paulq | 2,353 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!