Why is className showing up in my style rule?

Question

I'm trying to apply a keyframe animation to fade out an element, but when that class gets added to the element, it appears to adjust the rule itself and injects the className into the rule to reference the fadeOut keyframe.

      <div
        className={cx({
          [styles['announcement__sliderWrapper__single']]: true,
          [styles['announcement__dismissed']]:
            dismissedItems.includes(annnouncement.id)
        })}
      >

@keyframes fadeOut {
  0% {
    opacity: 100%;
  }
  99% {
    opacity: 0%;
  }
  100% {
    display: none;
  }
}

.announcement__dismissed {
  animation: fadeOut 5s 0 1; /* IE 10+, Fx 29+ */
}

This is what shows up in Chrome Dev Tools when the class is applied to the element:

.Announcements__announcement__dismissed___2-ucg {
    -webkit-animation: Announcements__fadeOut___u8Ob- 5s 0 1;
    animation: Announcements__fadeOut___u8Ob- 5s 0 1;
}

You are using a framework/library you didn't listed in tags or description I suppose. Maybe material-ui? This is not a React behavior — keul, Jul 25 '19 at 16:11
Yeah sorry! Using cx from classnames. I'll see if I can add it — user161592, Jul 25 '19 at 16:11
No, cx is just an utility for classNames... are you sure you are not using anything more? Is your CSS a old-school plain CSS or what? — keul, Jul 25 '19 at 16:13

score 0 · Answer 1 · answered Jul 25 '19 at 16:36

The class name is probably being injected in your animation name because of SASS nesting but without more context we can't be sure.

If you're trying to get this animation to work, you should change 2 things:

opacity should be a number between 0 and 1, instead of 0% and 100%.
You're setting the iteration count to 0 (fadeOut 5s 0 1), and the delay to 1 (without specifying units). You can check this by viewing the computed properties of the element. (try fadeOut 5s 1s)

Why is className showing up in my style rule?

1 Answers1