Skip to content

Instantly share code, notes, and snippets.

@ianrose

ianrose/index.html

Created August 27, 2013 23:00
Show Gist options
  • Save ianrose/6360160 to your computer and use it in GitHub Desktop.
Save ianrose/6360160 to your computer and use it in GitHub Desktop.
Download ZIP
css-keyframe-background-images
Raw
index.html
<html>
<head>
<style>
body {
background-color: #fff;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
-ms-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-name: bgswap;
-moz-animation-name: bgswap;
-o-animation-name: bgswap;
-ms-animation-name: bgswap;
animation-name: bgswap;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
}
@keyframes bgswap {
0% {
background-color: red;
}
15% {
background-color: blue;
}
16% {
background-color: red;
}
31% {
background-color: red;
}
32% {
background-color: blue;
}
47% {
background-color: red;
}
48% {
background-color: blue;
}
63% {
background-color: red;
}
64% {
background-color: blue;
}
79% {
background-color: red;
}
80% {
background-color: blue;
}
99% {
background-color: red;
}
100% {
background-color: blue;
}
}
/*@-webkit-keyframes bgswap {
0% {
background-color: red;
}
15% {
background-color: blue;
}
16% {
background-color: red;
}
31% {
background-color: red;
}
32% {
background-color: blue;
}
47% {
background-color: red;
}
48% {
background-color: blue;
}
63% {
background-color: red;
}
64% {
background-color: blue;
}
79% {
background-color: red;
}
80% {
background-color: blue;
}
99% {
background-color: red;
}
100% {
background-color: blue;
}
}*/
/*@keyframes bgswap {
0% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581");
}
15% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581");
}
16% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15474/02.jpg?1377296589");
}
31% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15474/02.jpg?1377296589");
}
32% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15475/03.jpg?1377296659");
}
47% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15475/03.jpg?1377296659");
}
48% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15476/04.jpg?1377296665");
}
63% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15476/04.jpg?1377296665");
}
64% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15477/05.jpg?1377296675");
}
79% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15477/05.jpg?1377296675");
}
80% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15478/06.jpg?1377296682");
}
99% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15478/06.jpg?1377296682");
}
100% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581");
}
}*/
@-webkit-keyframes bgswap {
0% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581");
}
15% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581");
}
16% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15474/02.jpg?1377296589");
}
31% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15474/02.jpg?1377296589");
}
32% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15475/03.jpg?1377296659");
}
47% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15475/03.jpg?1377296659");
}
48% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15476/04.jpg?1377296665");
}
63% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15476/04.jpg?1377296665");
}
64% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15477/05.jpg?1377296675");
}
79% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15477/05.jpg?1377296675");
}
80% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15478/06.jpg?1377296682");
}
99% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15478/06.jpg?1377296682");
}
100% {
background-image: url("http://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581");
}
}
</style>
</head>
<body>
test
</body>
</html>
@Moriort
Copy link

Moriort commented Feb 7, 2022

Funciona como el culo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment