Border color animation

by allcaps

HTML

<a href="#" class="card">Card content</a>

CSS

.card {
  display: inline-block;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  color: #000;
  border: 3px solid black;
}

.card:hover {
  animation: animate-border 5s linear infinite;
  transition: color 5s linear;  
  border-image: repeating-linear-gradient(0deg, blue, red) 1;
}

@keyframes animate-border {
  0% {
    border-image-source: linear-gradient(0deg, blue, red);
  }
  50% {
    border-image-source: linear-gradient(360deg, red, blue);
  }
}