Second text reveal block in a different color and emphasize one word fontweight

Question

I'm a visual designer with minimum code knowledge and trying to solve something that I haven't managed on my own. Here's the code that I'm working with:

/* Basic styles */

@import url('https://fonts.cdnfonts.com/css/open-sans');
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg-color: white;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  color: #000;
  background-color: var(--bg-color);
  font-family: 'Open Sans', sans-serif;
}

h1 {
  font-size: 3em;
  font-weight: 600;
  text-align: center;
}


/* title styles */

.home-title span {
  position: relative;
  overflow: hidden;
  display: block;
  line-height: 1.4;
}

.home-title span::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #009DC6;
  animation: a-ltr-after 2s cubic-bezier(.77, 0, .18, 1) forwards;
  transform: translateX(-101%);
}

.home-title span::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  animation: a-ltr-before 2s cubic-bezier(.77, 0, .18, 1) forwards;
  transform: translateX(0);
}

.home-title span:nth-of-type(1)::before,
.home-title span:nth-of-type(1)::after {
  animation-delay: 1s;
}

.home-title span:nth-of-type(2)::before,
.home-title span:nth-of-type(2)::after {
  animation-delay: 1.5s;
}

@keyframes a-ltr-after {
  0% {
    transform: translateX(-100%)
  }
  100% {
    transform: translateX(101%)
  }
}

@keyframes a-ltr-before {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(200%)
  }
}

<h1 class="home-title">
  <span>Nature is a blessing</span>
  <span>It deserves everything.</span>
</h1>

I have two issues that I think are fairly easy to fix:

1. When the second line of text comes in saying "It deserves everything." → I want the background block that comes in to be in a different color. → I want it to be this color #FE9226
2. 1. When the second line of text comes in saying "It deserves everything." → I want to emphasize the word "deserves" with a font-weight of 800.

I've tried creating a new class, I think it was an h2 class. But.. it messed up the whole lay-out so I really have no idea to solve these issues.

Answer 1

You can take advantage of CSS custom properties to change the colour of the block that appears before the text is revealed; these custom properties can be added using a specific CSS selector, or via the style attribute in the element itself (as I've done in the demo, below).

Also, I've wrapped the word "deserved" in an <em> tag, and defined the styling for that element in the CSS:

/* Basic styles */

@import url('https://fonts.cdnfonts.com/css/open-sans');
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg-color: white;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  color: #000;
  background-color: var(--bg-color);
  font-family: 'Open Sans', sans-serif;
}

h1 {
  font-size: 3em;
  font-weight: 600;
  text-align: center;
}


/* title styles */

.home-title span {
  position: relative;
  overflow: hidden;
  display: block;
  line-height: 1.4;
}

.home-title span::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  /* here we use the value of the --background-color custom property,
     or the default value if the custom-property is invalid or
     undefined: */
  background: var(--background-color, #009DC6);
  animation: a-ltr-after 2s cubic-bezier(.77, 0, .18, 1) forwards;
  transform: translateX(-101%);
}

.home-title span::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  animation: a-ltr-before 2s cubic-bezier(.77, 0, .18, 1) forwards;
  transform: translateX(0);
}

.home-title span:nth-of-type(1)::before,
.home-title span:nth-of-type(1)::after {
  animation-delay: 1s;
}

.home-title span:nth-of-type(2)::before,
.home-title span:nth-of-type(2)::after {
  animation-delay: 1.5s;
}

span em {
  font-style: italic;
  font-weight: 800;
}

@keyframes a-ltr-after {
  0% {
    transform: translateX(-100%)
  }
  100% {
    transform: translateX(101%)
  }
}

@keyframes a-ltr-before {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(200%)
  }
}

<h1 class="home-title">
  <span>Nature is a blessing</span>
  <span style="--background-color: #FE9226;">It <em>deserves</em> everything.</span>
</h1>