JSFiddle - React, Tailwind, and code Playground
CSS
@-webkit-keyframes test {
0% {
background-image: url('http://different.bloger.cz/obrazky/different.bloger.cz/google.jpg');
}
20% {
background-image: url('http://infoweb.netau.net/index_soubory/google.jpg');
}
40% {
background-image: url('http://2.bp.blogspot.com/_CPIk9tauQ_o/SUma3ofEHFI/AAAAAAAAAtw/RaP8aECEhMc/s400/google-bot-850.jpg');
}
60% {
background-image: url('http://mozektevidi.net/up/logo-adsense.jpg');
}
80% {
background-image: url('http://archiculturefilm.com/director/wp-content/uploads/2009/09/google_wave_logo.jpg');
}
100% {
background-image: url('http://www.mirecekp.net/wp-content/uploads/2009/09/google-chrome-logo.jpg');
}
}
div {
float: left;
width: 200px;
height: 200px;
background: red;
-webkit-animation-name: test;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}