<!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 © 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 */