Trying to fade out the text that splits in half

Only the background is fading out, the text is supposed to also.

What did I do wrong here? https://jsfiddle.net/368hrngv/

.panel-left::before,
.panel-right::before,
.panel-left,
.panel-right,
.panel-left p,
.panel-right p {
  content: "";
  animation: fadeOut 1s ease-in 7s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

    <div class="panel-left">
      <p>[ Enjoy The Music ]</p>
    </div>
    <div class="panel-right">
      <p>[ Enjoy The Music ]</p>
    </div>
    <div class="text1">
      <p>some text here</p>
    </div>
  </div>
</div>

This worked: https://jsfiddle.net/9yocr6Lp/

.fadetextbackground,
.panel-left p,
.panel-right p {
  content: "";
  animation: fadeOut 1s ease-in 7s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
    <div class="fadetextbackground">
    <div class="panel-left">
      <p>[ Enjoy The Music ]</p>
    </div>
    <div class="panel-right">
      <p>[ Enjoy The Music ]</p>
    </div>
    </div>

Why didn’t you just add opacity to the left and right panels. You don’t need all these multiple animations.

.panel-left::before,
.panel-right::before,
.panel-left,
.panel-right,
.panel-left p,
.panel-right p {
  content: "";
  animation: fadeOut 1s ease-in 3s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

You override those later anyway.

You could just have added opacity here.


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

You mean like this. https://jsfiddle.net/to59vqra/

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

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

If that does what you want then that’s it :slight_smile:

The only thing is that you don’t actually see the text fade out as you used 70% and by then the panel is almost gone. However I think that is what you wanted :slight_smile:

1 Like

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