<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<head>
  <title>CSS Sprite Animation</title>
 
  </head>
   
  <body>
    <div id=spriteContainer></div>
   
    <script src="/js/prefixfree.min.js"></script>
  </body>
  </html>
  

  
  
<style>
    body {
      padding: 30px;
    }
 
    #spriteContainer {
      width: 300px;
      height: 300px;
      display: block;
      background-image: url("https://image.freepik.com/free-vector/cute-bears-jumping-scene_1308-28181.jpg");
      animation: sprite .75s steps(10) infinite;
    }
 
    @keyframes sprite {
     100% {
       background-position: -7224px;
       </style>

	
	setTimeout("document.bgColor='white'", 1000)
  setTimeout("document.bgColor='lightpink'", 1500)
  setTimeout("document.bgColor = 'pink'", 2000)
  setTimeout("document.bgColor =  'deeppink'", 2500)
  setTimeout("document.bgColor = 'red'", 3000)
  setTimeout("document.bgColor = 'tomato'", 3500)
  setTimeout("document.bgColor = 'blue'", 4000)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.