HTML & CSS Custom CSS for revolving text

[Bradaz21]

Hi,

I'm currently building a website using squarespace and I want to create a header that has text that revolves. I've attached a image of what I am trying to achieve using html and css.

I want the parts of text that are underlined to revolve so that each time they change it creates a new sentence. If the previous and next words could be partially visible e.g. faded like shown above and below that would be great. I've got part of the way but the text doesn't seem to be revolving correctly and i'm not sure how to get the two to revolve at the same time.

Any help would be appreciated!

Bradaz

HTML

<p class="rotatingText">
Take the stress out of

  <span class="rotatingText-adjective">extending</span>
  <span class="rotatingText-adjective">renovating</span>
  <span class="rotatingText-adjective">building</span>
</p>

.rotatingText {
  font-family: "Balto-Light";
  font-style: normal;
  font-size: 40px;
  text-align: left;
}

[B]CSS[/B]
.rotatingText-adjective {
  font-family: "Balto-bold";
  font-size: 40px;
  font-style: underline;
  font-weight: 700;
  left: 0px;
  margin-bottom: 0;
  margin-top: 1px;
  opacity: 0;
  position: absolute;
  right: 500px;
  text-align: center;
  text-transform: uppercase;
  top: 0;
}

.rotatingText-adjective:nth-of-type(1) {
  animation-name: rotate;
  animation-duration: 2s;
  animation-delay: 1s;
}

.rotatingText-adjective:nth-of-type(2) {
  animation-name: rotate;
  animation-duration: 2s;
  animation-delay: 1s;
}

.rotatingText-adjective:nth-of-type(3) {
  animation-name: rotate-last;
  animation-duration: 2;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}

@keyframes rotate {
  0% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }
 
  20%, 80% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
 
  100% {
    opacity: 0;
    transform: translate3d(0, -25px, 0);
  }
}

@keyframes rotate-last {
  0% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }
 
  50%, 100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

 

[Bradaz21]

This is what I am looking to achieve