How do you create an animated border for an image in a table cell without affecting the table?

Question

I'm trying to wrap an image in a table cell with an animated border. I have done the border now but when I try to apply the border it goes to the entire table rather than the specific image.

My html:

<table>
    <tr class='TopRow'>
        <td rowspan='2' style='width: 15%; text-align: center; vertical-align: middle;'>
            <div class='ProfileContainer'>
                <img src='../Avatar 1.jpg' class='ProfilePic'>
                <span class='top'></span>
                <span class='right'></span>
                <span class='bottom'></span>
                <span class='left'></span>
            </div>
        </td>
        <td rowspan='1'>
            <p style='padding-top: 5px; padding-left: 10px;'> May 22, 2019 </p>
        </td>
    </tr>
    <tr class='BottomRow'>
        <td rowspan='1' style='padding-top: 10px; padding-left: 10px;'>
        <p>aaa</p>
        </td>
    </tr>
</table>

My CSS:

table {
    border: 1px solid white;
    position: relative;
    left: 80px;
    width: 80%;
    border-collapse: collapse;
}

.ProfilePic {
    width: 80px;
    height: 80px;
    border: #fff;
    background: transparent;
    overflow: hidden;
    border-top: 4px solid rgba(255, 49, 49, 0.5);
    border-right: 4px solid rgba(0, 255, 255, 0.5);
    border-bottom: 4px solid rgba(57, 255 , 20, 0.5);
    border-left: 4px solid rgba(255, 255, 113, 0.5);
}

span {
    position: absolute;
    border-radius: 5vmax;
}

.top {
    top: 0;
    left: 0;
    width: 0;
    height: 5px;
    background: linear-gradient(90deg, transparent 50%, rgba(255, 49, 49, 0.5), rgb(255, 49, 49));
}

.bottom {
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, rgb(57, 255, 20), rgba(57, 255, 20, 0.5), transparent 50%);
}

.right {
    top: 0;
    right: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 255, 255, 0.5), rgb(0, 255, 255));
}

.left {
    bottom: 0;
    left: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg, rgb(255, 255, 113), rgba(255, 255, 113, 0.5), transparent 70%);
}

.top {
    animation: animateTop 3s ease-in-out infinite;
}

.bottom {
    animation: animateBottom 3s ease-in-out infinite;
}

.right {
    animation: animateRight 3s ease-in-out infinite;
}

.left {
    animation: animateLeft 3s ease-in-out infinite;
}

@keyframes animateTop {
    25% {
        width: 100%;
        opacity: 1;
    }
    
    30%,
    100% {
        opacity: 0;
    }
}

@keyframes animateBottom {
    0%,
    50% {
        opacity: 0;
        width: 0;
    }

    75% {
        opacity: 1;
        width: 100%;
    }

  76%,
  100% {
    opacity: 0;
  }
}

@keyframes animateRight {
  0%,
  25% {
    opacity: 0;
    height: 0;
  }

  50% {
    opacity: 1;
    height: 100%;
  }

  55%,
  100% {
    height: 100%;
    opacity: 0;
  }
}

@keyframes animateLeft {
  0%,
  75% {
    opacity: 0;
    bottom: 0;
    height: 0;
  }

  100% {
    opacity: 1;
    height: 100%;
  }
}
    

I believe that it's because of my span attribute and I have tried to use div or even wrapping it into another table but it still doesn't work.

Answer 1

If you want to apply animate border to the image then you have to add the below .class in your css code.

.ProfileContainer {
  position: relative;
  display: table;
  margin: auto;
}