CODEWITHSUNDEEP
htmlcss
Kumquat
Kumquat

Reputation: 72

CSS Border shifts text down when I start animation

On a website I was making, I was trying to create a border animation that flashed yellow and purple repeatedly around an image. I came out with this:

@-webkit-keyframes battle {
    0% {
    border:5px solid yellow;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    padding: 0px;
    }
    50% {
    border:5px solid purple;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    padding: 0px;
    }
}

I activated it with a :hover element. However, when I hovered my mouse over it, the border appeared and repeatedly pushed the text below up and down. I tried to add a border to the animated element but the animated border just went on top of the border.

Is there a way to fix this? Any help would be great.

Upvotes: 0

Views: 93

Answers (1)

Ori Drori
Ori Drori

Reputation: 192317

Set the basic border in the class of the element that you are going to animate, then let the animation deal only with the change of the border color.

.animated {
  border: 5px solid transparent; /** the basic border **/
  border-radius: 25px;
  width: 100px;
  height: 100px;
  text-align: center;
}

.animated:hover {
  animation: battle 1s infinite alternate;
}

@keyframes battle {
    from {
      border-color: yellow;
    }

    to {
      border-color: purple;
    }
}
<div class="animated">
  This is the content
</div>

Upvotes: 1

Related Questions