Trying to add an Animation utility. Not sure why is not working!

[dceballos1991]

Hi! I wanted to add an animation utility for skeleton elements. This would basically do the gradient moving back and forward typical of place holder elements. This is what I added on the tailwind.scss file under @tailwind utilities;

`.loading-animation {

• ::before {
  content: "";
  display: block;
  position: absolute;
  left: -150px;
  top: 0;
  height: 100%;
  width: 150px;
  background: linear-gradient(
  to right,
  transparent 0%,
  #e8e8e8 50%,
  transparent 100%
  );
  animation: load 1s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @Keyframes load {
  from {
  left: -150px;
  }
  to {
  left: 100%;
  }
  }
  }`

Any idea why this is not working?? Any help would be greatly appreciated 🙏🏽

[vtalbot]

My guess would be that you type sass in a css file. The content you show is using nested css.

[dceballos1991]

Im sorry I meant to type tailwind.scss so it is an actual sass file. I just edited my original question. Any other clue why it wouldnt be working?

[vtalbot]

Have you tried moving the @Keyframe part out of the nested .loading-animation?

[royvanv]

Your code seems to work (using SCSS): https://codepen.io/royvanv/full/YzwOpPm
It only shows the animation once, if you add infinite at the end of the animation property it will loop.

Tip: If you want to add a code block, please use 3 backticks instead of one.