Have curtain open on its own on page load

HTML & CSS
1

All I am doing here is making an example of the curtain openning up on its own on page load.

How would I do that? https://jsfiddle.net/3cwqxonr/

I do not believe javascript is needed for this.

.curtain {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 3px solid red;
  box-sizing: border-box;
  border-radius: 25px;
  overflow: hidden;
  background: transparent;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all 8s ease;
  /*transition-delay: 300ms;* fade is in place/
  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;
  pointer-events: none;
}

.panel-right::before {
  left: -100%;
}

.curtain.slide .panel-left {
  /* transform: translateX(-100%);*/
  transform: translateX(calc(-100% - 1px));
}

/*.panel-left::before {
  background: rgba(0, 0, 0, 0.5);
}*/

.curtain.slide .panel-right {
  /*transform: translateX(100%);*/
  transform: translateX(calc(100% + 1px));
}
2

You would need to use keyframes instead of transitions because a transition only works when something changes from one state to another. For example you add the slide class with js and then that changes the transform value and a transition occurs. If you added the slide class by default then there is no change from one value to another.

You would instead need to use keyframes and change your left and right routines as follows.

.curtain .panel-left {
  /* transform: translateX(-100%);*/
  /*transform: translateX(calc(-100% - 1px));*/
  animation:slideLeft 8s forwards;
}
@keyframes slideLeft{
  to{transform: translateX(calc(-100% - 1px))}
}

/*.panel-left::before {
  background: rgba(0, 0, 0, 0.5);
}*/

.curtain .panel-right {
  /*transform: translateX(100%);*/
  /*transform: translateX(calc(100% + 1px));*/
   animation:slideRight 8s forwards;
}
@keyframes slideRight{
  to{transform: translateX(calc(100% + 1px))}
}
1 Like
3

If I want to add a delay to it, where would that go?

animation-delay: 300ms;

It has to be placed in both spots. https://jsfiddle.net/x7f84oub/

.curtain .panel-left {
  /* transform: translateX(-100%);*/
  /*transform: translateX(calc(-100% - 1px));*/
  animation: slideLeft 8s forwards;
  animation-delay: 300ms;
}

@keyframes slideLeft {
  to {
    transform: translateX(calc(-100% - 1px))
  }
}

/*.panel-left::before {
  background: rgba(0, 0, 0, 0.5);
}*/

.curtain .panel-right {
  /*transform: translateX(100%);*/
  /*transform: translateX(calc(100% + 1px));*/
  animation: slideRight 8s forwards;
  animation-delay: 300ms;

}

@keyframes slideRight {
  to {
    transform: translateX(calc(100% + 1px))
  }
}
4

Yes :slight_smile:

1 Like
5

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