CODEWITHSUNDEEP
css
Brad
Brad

Reputation: 331

Keyframe animating border-bottom color

I've read over other questions/answers that address keyframes (as well as articles online) and it really seems to me my code should work...but nothing happens. I'm not using any vendor prefixes because from caniuse it seems they aren't necessary anymore. `

@keyframe colorWash {
  from{border-bottom:25px solid #111;}
  50%{border-bottom: 25px solid #333;}
  to{border-bottom:25px solid #777;}
}

#bro {
  padding:2rem;
  background-color:#999;
  border-bottom: 25px solid #111;
  animation: colorWash 10s infinite;
}

Upvotes: 0

Views: 705

Answers (1)

tao
tao

Reputation: 90013

Except for one minor detail (which, in CSS, matters) your animation works:

  • it's not @keyframe, but @keyframes

Now, since you specified it should loop infinitely, I assume you want it smooth. Therefore, you probably want to match from with to (so the transition between end and start is seamless. I also shortened the duration, so it's easier to observe.

It's also advisable to only specify the property to be animated in @keyframes. In your case, border-bottom-color:

@keyframes colorWash {
  from {border-bottom-color: #111;}
  42%{border-bottom-color: #777;}
  to {border-bottom-color: #111;}
}

#bro {
  padding:2rem;
  background-color:#999;
  border-bottom: 25px solid;
  animation: colorWash 3s infinite;
  }
<div id="bro"></div>

Upvotes: 3

Related Questions