Css Sprite Animation

In this example below you will see how to do a Css Sprite Animation with some HTML / CSS and Javascript

A simple sprite animation with cssForked from Riccardo Tartaglia's Pen Css Sprite Animation.

Thumbnail
This awesome code was written by shubhra, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright shubhra ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Css Sprite Animation</title>
  
    <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! */
      /* -------------- Animation -------------- */

#animation {
  display: inline-block;
  position: relative;
  text-align: center;
}

/* -------------- Frame -------------- */

.showRoll #frame {
  border-color: hsl(0,0%,70%);
}

#frame {
  width: 250px;
  height: 280px;
  border: 1px solid transparent;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/the_dancer.png) no-repeat 0 0;
  animation: frame-animation 1s steps(29) infinite;    
}

@keyframes frame-animation { 
  0% { background-position: 0px 0; } 
  100% { background-position: -7250px 0; } 
}

/* -------------- Roll -------------- */

.showRoll #roll {
  opacity: .5;
}

#roll {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 480px;
  height: 130px;
  border: 1px solid hsl(0,0%,70%);
  background: hsl(0,0%,100%) url(http://www.riccardotartaglia.it/img/ryu-sprite.jpg) no-repeat left top;
  transition: opacity .3s linear;
  animation:  roll-animation .6s steps(6) infinite;
}

@keyframes roll-animation { 
  0% { transform: translateX(0); } 
  100% { transform:  translateX(-480px); } 
}


/*--------- GENERAL ------------- */
body {
  display:         flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 50px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;    
}
#check{ margin-top:20px }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <!-- Author: Riccardo Tartaglia
http://www.riccardotartaglia.it/css-lab-sprite-sheet-animation-con-lutilizzo-di-steps/ -->

<div id="animation">
  <div id="frame"></div>
  <div id="roll"></div>
</div>

<div id="check">
  <input id="show" type="checkbox"> show sprite
</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>

/*Downloaded from https://www.codeseek.co/shubhra/css-sprite-animation-OMwjKJ */
/* -------------- Animation -------------- */

#animation {
  display: inline-block;
  position: relative;
  text-align: center;
}

/* -------------- Frame -------------- */

.showRoll #frame {
  border-color: hsl(0,0%,70%);
}

#frame {
  width: 250px;
  height: 280px;
  border: 1px solid transparent;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/the_dancer.png) no-repeat 0 0;
  animation: frame-animation 1s steps(29) infinite;    
}

@keyframes frame-animation { 
  0% { background-position: 0px 0; } 
  100% { background-position: -7250px 0; } 
}

/* -------------- Roll -------------- */

.showRoll #roll {
  opacity: .5;
}

#roll {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 480px;
  height: 130px;
  border: 1px solid hsl(0,0%,70%);
  background: hsl(0,0%,100%) url(http://www.riccardotartaglia.it/img/ryu-sprite.jpg) no-repeat left top;
  transition: opacity .3s linear;
  animation:  roll-animation .6s steps(6) infinite;
}

@keyframes roll-animation { 
  0% { transform: translateX(0); } 
  100% { transform:  translateX(-480px); } 
}


/*--------- GENERAL ------------- */
body {
  display:         flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 50px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;    
}
#check{ margin-top:20px }

/*Downloaded from https://www.codeseek.co/shubhra/css-sprite-animation-OMwjKJ */
$('#show').change( function() {
  $('#animation').toggleClass('showRoll');
});

Comments