How to add a delay to the curtains from closing?

HTML & CSS
1

After the exit button is clicked, how would a delay be added to the curtain animation,

or would I be adding the delay to something else?

To delay the curtain animation.

I’m stuck on that. https://jsfiddle.net/dwce2yxk/

Adding: animation-delay: doesn’t work on these.

.fadingOut .container.active .curtain .panel-left {
  animation: curtain1-close 8s ease forwards;
}

@keyframes curtain1-close {
  from {
    transform: translateX(calc(-100% - 1px));
  }

  to {
    transform: translateX(0);
  }
}

.fadingOut .container.active .curtain .panel-right {
  animation: curtain2-close 8s ease forwards;
}

@keyframes curtain2-close {
  from {
    transform: translateX(calc(100% + 1px));
  }

  to {
    transform: translateX(0);
  }
}
2

It works for me.

You just have tp set the curtain to start at each edge though.

.fadingOut .container.active .curtain .panel-left{
   transform: translateX(calc(-100% - 1px));
    animation-delay:5s;
   
}
.fadingOut .container.active .curtain .panel-right{
  animation-delay:5s;
  transform: translateX(calc(100% + 1px));
}
1 Like
3

It would be added like this? https://jsfiddle.net/536L0qza/

Writing it this way works.

.fadingOut .container.active .curtain .panel-left {
  animation: curtain1-close 8s ease;
  transform: translateX(calc(-100% - 1px));
  animation-delay: 5s;
}

@keyframes curtain1-close {
  to {
    transform: translateX(0);
  }
}

.fadingOut .container.active .curtain .panel-right {
  animation: curtain2-close 8s ease forwards;
  transform: translateX(calc(100% + 1px));
  animation-delay: 5s;
}

@keyframes curtain2-close {
  to {
    transform: translateX(0);
  }
}
4

I noticed an issue there: https://jsfiddle.net/ft2qgbvy/

After the left curtain closes, it disappears.

701×264 21.1 KB

.fadingOut .container.active .curtain .panel-left {
  animation: curtain1-close 8s ease;
  transform: translateX(calc(-100% - 1px));
  animation-delay: 5s;
}

@keyframes curtain1-close {
  to {
    transform: translateX(0);
  }
}

.fadingOut .container.active .curtain .panel-right {
  animation: curtain2-close 8s ease forwards;
  transform: translateX(calc(100% + 1px));
  animation-delay: 5s;
}

@keyframes curtain2-close {
  to {
    transform: translateX(0);
  }
}
5

You missed out the forwards value.


.fadingOut .container.active .curtain .panel-left {
  animation: curtain1-close 8s ease forwards;
  transform: translateX(calc(-100% - 1px));
  animation-delay: 5s;
}

@keyframes curtain1-close {
  to {
    transform: translateX(0);
  }
}

.fadingOut .container.active .curtain .panel-right {
  animation: curtain2-close 8s ease forwards ;
  transform: translateX(calc(100% + 1px));
  animation-delay: 5s;
}
1 Like
6

How it was originally written, this way.

.fadingOut .container.active .curtain .panel-left {
  animation: curtain1-close 8s ease forwards;
}

@keyframes curtain1-close {
  from {
    transform: translateX(calc(-100% - 1px));
  }

  to {
    transform: translateX(0);
  }
}

As I understand it, From is not needed on there, and it is able to be written this way also.

.fadingOut .container.active .curtain .panel-left {
  animation: curtain1-close 8s ease forwards;
  transform: translateX(calc(-100% - 1px));
}

@keyframes curtain1-close {
  to {
    transform: translateX(0);
  }
}
7

Its not needed because I moved the start position into that original rule.

Previously the animation started straight away so the ‘from’ part was actioned straight away and was fine. However when you delay the animation the start position is not where it should be until the animation starts which is why I moved the start position into the original rule.

You have to remember with keyframes that when you use ‘forwards’ the element takes its final position as its new position. Therefore when you are opening and closing the curtains the position of the elemet may be different once the animation has run once.

1 Like
8

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