JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="wrap">
<img id="left" src="http://webentwicklung.ulrichbangert.de/images/vorhang-links.jpg">
<img id="right" src="http://webentwicklung.ulrichbangert.de/images/vorhang-rechts.jpg">
</div>

CSS

body {
  margin: 0;
  padding: 0;

}
#wrap {
  width: 100vw;
  height: 100vh;
  background-image: url(http://webentwicklung.ulrichbangert.de/images/2017-12-18-Wolfenbuettel-Weihnachtsmarkt-06.jpg);
  background-size: cover;
}
#left {
  position: fixed;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  animation: open 5s ease-out forwards;
}
#right {
  position: fixed;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  animation: open 5s ease-out forwards;
}
@keyframes open {
  to {width: 0%}
}