<!DOCTYPE html>
<html>

<html lang="en">

<head>
  <title>CSS 3 Animation</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="MPG Analysis of 2005 Honda Civic">
  <meta name="author" content="AdamActual">

  <!-- FAVICON -->
  <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" />

  <!-- Bootstrap -->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <!-- Fonts -->
  <link href="http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext" rel="stylesheet" type="text/css">

  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  <link rel="stylesheet" href="">
  <style>
    /* footer styles
-------------------------------------------------- */

    
    footer.navbar-default.navbar-fixed-bottom {
      background: #6698FF;
      color: white;
      padding: 1em 0;
    }
    
    footer.navbar-default.navbar-fixed-bottom p {
      margin: 0;
    }
    /*SPRITE ANIMATION*/
    
    @-webkit-keyframes wink {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -3780px 0;
      }
    }
    
    @-moz-keyframes wink {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -3780px 0;
      }
    }
    
    @keyframes wink {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -3780px 0;
      }
    }
    
    .sprite {
      background-image: url("http://geekboy.in/wp-content/uploads/2014/11/sprite-1.png");
      width: 140px;
      height: 140px;
      margin: 40px auto 0;
      -webkit-animation: wink 2s steps(27) infinite;
      -moz-animation: wink 2s steps(27) infinite;
      animation: wink 2s steps(27) infinite;
    }
  </style>
</head>

<body>
  <!-- NAVIGATION -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </nav>

  <!-- CONTENT -->
  <div class="container">
    <div class="page-header">
      <h1>Animating Sprites With CSS 3</h1>
    </div>
    <div class="page-header">
      <div class="jumbotron">
        <h1>CSS 3 Animation</h1>
        <div class="sprite"></div>
      </div>
    </div>
  </div>

  <!-- FOOTER -->
  <footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid">
      <p>Copyright 2015 &copy; AdamActual.io</p>
    </div>
  </footer>

  <!-- SCRIPTS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>

</html>
<!-- 
Resources:
http://effectivewebdesigns.blogspot.ca/2014/01/twitter-bootstrap-sticky-footer-without.html#.VrvbQFgrKM_
http://codepen.io/AdamActual/pen/GoPvWN
http://jsfiddle.net/adamActual/bx1ejk59/1/

Build a Street Fighter Demo with CSS Animations and JavaScript 
https://davidwalsh.name/street-fighter

Create a Brilliant Sprited, CSS-Powered Firefox Animation
https://davidwalsh.name/firefox-animation

Sprite Sheet Animations Using Only CSS 
https://www.kirupa.com/html5/sprite_sheet_animations_using_only_css.htm

Sprite Sheet animation with CSS3 using the steps() feature. 	
https://jsfiddle.net/simurai/CGmCe/	

CSS Sprite Sheet Animation
http://codepen.io/yawatakashi/pen/gjklE

Simple sprite animation using CSS3 @keyframes and steps()
http://fredparke.com/blog/simple-sprite-animation-using-css3-keyframes-and-steps
-->
// Code goes here

/* Styles go here */