Bilder mit Hover-Effekt - Bilder wieder langsam schließen

<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>