D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ianrose
Full window
Github gist
css-keyframe-background-images
<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("https://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581"); } 15% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581"); } 16% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15474/02.jpg?1377296589"); } 31% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15474/02.jpg?1377296589"); } 32% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15475/03.jpg?1377296659"); } 47% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15475/03.jpg?1377296659"); } 48% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15476/04.jpg?1377296665"); } 63% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15476/04.jpg?1377296665"); } 64% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15477/05.jpg?1377296675"); } 79% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15477/05.jpg?1377296675"); } 80% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15478/06.jpg?1377296682"); } 99% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15478/06.jpg?1377296682"); } 100% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581"); } }*/ @-webkit-keyframes bgswap { 0% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581"); } 15% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581"); } 16% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15474/02.jpg?1377296589"); } 31% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15474/02.jpg?1377296589"); } 32% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15475/03.jpg?1377296659"); } 47% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15475/03.jpg?1377296659"); } 48% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15476/04.jpg?1377296665"); } 63% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15476/04.jpg?1377296665"); } 64% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15477/05.jpg?1377296675"); } 79% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15477/05.jpg?1377296675"); } 80% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15478/06.jpg?1377296682"); } 99% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15478/06.jpg?1377296682"); } 100% { background-image: url("https://s3.amazonaws.com/massrel-viz-assets/production/15473/01.jpg?1377296581"); } } </style> </head> <body> test </body> </html>