Curtains closing at different positions

HTML & CSS
1

When closing, both sides are not the same horizontal length.

How is that fixed?

How come they are not even?

https://jsfiddle.net/cwxr9bzk/

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

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

  to {
    transform: translateX(0);
  }
}

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

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

  to {
    transform: translateX(0);
  }
}

719×228 2.21 KB

2

I have no ides what you mean.

I can’t see any difference.

3

Unless its the 1px that is wrongly assigned here.

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

  to {
    transform: translateX(0);
  }
}

I believe it should be 100% + 1px.

That may make a timing difference.

1 Like
4

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