Sass will not animate my transform: translate in keyframes

I am converting a practice project from CSS to SCSS and I noticed that the transform: translate on my keyframes animation does not work in a nested span I have for my heading, as well as the margins. They worked perfectly fine when I had it in CSS and other areas of the nested styles seem to work as expected. I will provide the code snippets here, as well as a link to my repo with all the code included. Thanks in advance!

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }

  80% {
    transform: translateX(3%);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }

  80% {
    transform: translateX(-3%);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}
.heading-primary {
  display: block;
  color: $color-white;
  text-transform: uppercase;
  backface-visibility: hidden;

  &--main {
    font-size: 6rem;
    font-weight: 600;
    letter-spacing: 3.25rem;
    animation-name: moveInLeft;
    animation-duration: 10s;
    margin-bottom: 2rem;
  }
  &--sub {
    letter-spacing: 1.75rem;
    font-size: 1.5rem;
    animation-name: moveInRight;
    animation-duration: 10s;
    margin-bottom: 6rem;
  }
}

The HTML

 <h1 class="heading-primary">
            <span class="heading-primary--main">Outdoors</span>
            <span class="heading-primary--sub">is where life happens</span>
  </h1>

Deployed Site
https://peaceful-wisp-0e1620.netlify.app/

I discovered the solution and cause of the issue. The course I was following did not use the correct implementation of the BEM style for naming classes. Someone in the comments pointed this out and when I made the change to the correct usage, my animation problem was fixed. I will provide examples in HTML and SCSS of the wrong implementation and the correct implementation to give a better visual.

INCORRECT USAGE OF BEM:
SCSS

.heading-primary {
  display: block;
  color: $color-white;
  text-transform: uppercase;
  backface-visibility: hidden;
  margin-bottom: 6rem;

  &--main {
    font-size: 6rem;
    font-weight: 600;
    letter-spacing: 3.25rem;
    animation: moveInLeft 3s ease-out;
    margin-bottom: 2rem;
  }
  &--sub {
    letter-spacing: 1.75rem;
    font-size: 1.5rem;
    animation: moveInRight 3s ease-out;
  }
}

HTML

 <h1 class="heading-primary">
            <span class="heading-primary--main">Outdoors</span>
            <span class="heading-primary--sub">is where life happens</span>
          </h1>

The above example is not correct because the class modifiers need to also share the same class for the base styling and then have their own separate class to distinguish them. The styles should not just be inherited from the parent element.

CORRECT USAGE:
SCSS

.heading-primary__text {
  display: block;
  color: $color-white;
  text-transform: uppercase;
  backface-visibility: hidden;
  margin-bottom: 6rem;

  &--main {
    font-size: 6rem;
    font-weight: 600;
    letter-spacing: 3.25rem;
    animation: moveInLeft 3s ease-out;
    margin-bottom: 2rem;
  }
  &--sub {
    letter-spacing: 1.75rem;
    font-size: 1.5rem;
    animation: moveInRight 3s ease-out;
  }
}

HTML

  <h1 class="heading-primary">
            <span class="heading-primary__text heading-primary__text--main">Outdoors</span>
            <span class="heading-primary__text heading-primary__text--sub">is where life happens</span>
          </h1>

This example is correct because now I have a shared class that sets the base styles for both elements, as well as the unique modifier class to distinguish the differences. Both of these classes are provided in the targeted elements in this example, which is the correct way to do it.

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