How to add sliding curtain to the entire viewport?

I do not know what I am doing: https://jsfiddle.net/kj0z6v17/

.panel-left {
  left: 0;
  animation: slideLeft 8s forwards;
  animation-delay: 700ms;
}

@keyframes slideRight {
  0% {
    transform: translateX(calc(100% + 1px));
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}


.panel-right {
  right: 0;
  animation: slideRight 8s forwards;
  animation-delay: 700ms;
}

@keyframes slideRight {
  0% {
    transform: translateX(calc(100% + 1px));
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

I was thinking of something like this:



@keyframes slideLeft {
  30% {
    opacity: 1;
  }

  90% {
    transform: translateX(calc(-100% - 1px));
  }

  100% {
    opacity: 0;
  }
}

@keyframes slideRight {
  30% {
    opacity: 1;
  }

  90% {
    transform: translateX(calc(100% + 1px));
  }

  100% {
    opacity: 0;
  }
}

You may have to play around with the percentages to get it how you want it.

1 Like

What seems to be the issue here? https://jsitor.com/lNEvb_f2p

After the text slides out all the way, they slide back in.

@keyframes slideLeft {
  88% {
    opacity: 1;
  }

  90% {
    transform: translateX(calc(-100% - 1px));
  }

  100% {
    opacity: 0;
  }
}

The 90% transform rule probably needs to be repeated in the 100% rule as well.

.panel-left,
.panel-right {
  position: fixed;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
}

.panel-left {
  left: 0;
  animation: slideLeft 8s forwards;
  animation-delay: 700ms;
}

@keyframes slideLeft {
  88% {
    opacity: 1;
  }

  90% {
    transform: translateX(calc(-100% - 1px));
  }

  100% {
    opacity: 0;
    transform: translateX(calc(-100% - 1px));
  }
}

.panel-right {
  right: 0;
  animation: slideRight 8s forwards;
  animation-delay: 700ms;
}

@keyframes slideRight {
  88% {
    opacity: 1;
  }

  90% {
    transform: translateX(calc(100% + 1px));
  }

  100% {
    opacity: 0;
   transform: translateX(calc(100% + 1px));
  }
}
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.