<style>
div#blumenGarten {
width: 640px;
height: 120px;
background: url("01.jpg") center left 0px, url("02.jpg") center left 0px, url("03.jpg") center left 0px, url("04.jpg") center left 0px;
background-repeat: no-repeat;
}
div#blumenGarten:hover {
animation: bewegeBlumen 2s;
animation-fill-mode: forwards;
}
div#blumenGarten:not(:hover) {
animation: bewegeKeineBlumen 2s;
}
@keyframes bewegeBlumen {
100% {
background: url("01.jpg") center left 0px, url("02.jpg") center left 160px, url("03.jpg") center left 320px, url("04.jpg") center left 480px;
background-repeat: no-repeat;
}
}
@keyframes bewegeKeineBlumen {
from {
background: url("01.jpg") center left 0px, url("02.jpg") center left 160px, url("03.jpg") center left 320px, url("04.jpg") center left 480px;
background-repeat: no-repeat;
}
to {
background: url("01.jpg") center left 0px, url("02.jpg") center left 0px, url("03.jpg") center left 0px, url("04.jpg") center left 0px;
background-repeat: no-repeat;
}
}
</style>
<div id="blumenGarten"></div>