0

So, I was trying to add a border animation to my webpage but it was not working. After lot of testing, I discovered that a specific class wrapper was responsible for removing my animation and omitting it solves the problem?

But I am unable to understand the reason behind as it looks unsuspecting. By the way, I am new to HTMl, CSS.

.wrapper {
  position: relative;
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  background: #ffffff;
}

#box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  color: white;
  font-family: 'Raleway';
  font-size: 2.5rem;
}

.gradient-border {
  --borderWidth: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}

.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-2 * var(--borderWidth));
  left: calc(-2 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 4);
  width: calc(100% + var(--borderWidth) * 4);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
<div class="wrapper">
  <div class="gradient-border" id="box">This is my box</div>
</div>
doğukan
  • 23,073
  • 13
  • 57
  • 69
mr.loop
  • 818
  • 6
  • 20
  • thanks for adding `run code snippet`, looks like the animation works nearly fine. So, in the `#box` I added `z-index:9999` and now the animation is back although covers the entire box background. So what could be the problem? Any ideas. – mr.loop May 22 '21 at 16:24

1 Answers1

2

The problem is because the wrapper is actually extending out to the right and is over the top of your border. If you set your wrapper background to 'red' you will see what is happening.

And because you have the z-index of the border set to -1, the wrapper is sitting on top of the border. Easiest fix is to just set the wrapper z-index to -2 so it's behind the border.

.wrapper {
  position: relative;
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  background: #ffffff;
  z-index: -2;
}

#box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  color: white;
  font-family: 'Raleway';
  font-size: 2.5rem;
}

.gradient-border {
  --borderWidth: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}

.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-2 * var(--borderWidth));
  left: calc(-2 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 4);
  width: calc(100% + var(--borderWidth) * 4);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
  z-index: -2;
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
<div class="wrapper">
  <div class="gradient-border" id="box">This is my box</div>
</div>
jpmc
  • 1,147
  • 7
  • 18