root {
  --main-x: 0;
  --main-y: 0;
  --main-width: 40%;
}

@keyframes mysteadyanimation {
  0% {
    left: 40%;
    /*top: -50px;*/
    width: 40%;
    opacity: 1;
  }
  to {
    left: 40%;
    /*top: 0px;*/
    width: 40%;
    opacity: 1;
  }
}

@keyframes myleftanimation {
  0% {
    left: 0;
    /*top: -50px;*/
    width: 0;
    opacity: 0;
  }
  to {
    left: 40%;
    /*top: 0px;*/
    width: 40%;
    opacity: 1;
  }
}

@keyframes myrightanimation {
  0% {
    left: 40%;
    /*top: -50px;*/
    width: 40%;
    opacity: 1;
  }
  to {
    left: 100%;
    /*top: 0px;*/
    width: 0%;
    opacity: 0;
  }
}

#movingimage {
  position: absolute;
  opacity: 0;
  animation: myleftanimation 5s linear;
}