Skip to content

Instantly share code, notes, and snippets.

@gj84

gj84/simpleslideshow.html

Created August 27, 2012 04:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gj84/3485618 to your computer and use it in GitHub Desktop.
Save gj84/3485618 to your computer and use it in GitHub Desktop.
Download ZIP
Simple slideshow
Raw
simpleslideshow.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div#slide {
width: 960px;
height: 400px;
animation: slide 30s;
-webkit-animation: slide 30s;
-moz-animation: slide 30s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
}
@keyframes slide {
0% {background-image: url('images/im0.jpg');}
20% {background-image: url("images/im1.jpg");}
40% {background-image: url("images/im2.jpg");}
60% {background-image: url("images/im3.jpg");}
80% {background-image: url("images/im4.jpg");}
100% {background-image: url("images/im5.jpg");}
}
@-moz-keyframes slide {
0% {background-image: url('images/im0.jpg');}
20% {background-image: url("images/im1.jpg");}
40% {background-image: url("images/im2.jpg");}
60% {background-image: url("images/im3.jpg");}
80% {background-image: url("images/im4.jpg");}
100% {background-image: url("images/im5.jpg");}
}
@-webkit-keyframes slide {
0% {background-image: url('images/im0.jpg');}
20% {background-image: url("images/im1.jpg");}
40% {background-image: url("images/im2.jpg");}
60% {background-image: url("images/im3.jpg");}
80% {background-image: url("images/im4.jpg");}
100% {background-image: url("images/im5.jpg");}
}
</style>
</head>
<body>
<div id="slide"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment