CODEWITHSUNDEEP
csslesscss-animations
CaptSaltyJack
CaptSaltyJack

Reputation: 16055

CSS border won't animate

For some reason, when I hover over the div, the border animates properly, but mousing off of it produces no transition. What am I missing?

http://codepen.io/anon/pen/XbPbvr

HTML:

<div class="test">
  Test
</div>

LESS:

.test {
  background: #eee;
  border-bottom: none;
  width: 300px;
  height: 300px;
  transition: border 100ms ease-out;

  &:hover {
    border-bottom: 5px solid black;
    transition: border 100ms ease-out;
  }
}

Upvotes: 1

Views: 316

Answers (3)

lingo
lingo

Reputation: 1908

Border can't be none. Try this:

.test {
  background: #eee;
  border-bottom: 5px solid transparent;
  width: 300px;
  height: 300px;
  transition: border 100ms ease-out;

  &:hover {
    border-bottom: 5px solid black;
    transition: border 100ms ease-out;
  }
}

Upvotes: 1

Palpatim
Palpatim

Reputation: 9272

If you truly want no border, you can animate the color to transparent and the length to 0:

.test {
  background: #eee;
  border-bottom: 0px solid transparent;
  width: 300px;
  height: 300px;
  transition: border 100ms ease-out;
}

.test:hover {
  border-bottom: 5px solid black;
}
<div class="test">
  Test
</div>

Upvotes: 5

Aakash Dhuna
Aakash Dhuna

Reputation: 76

You can't animate to border-bottom: none, change that to border-bottom: RGBA(0,0,0,0) (or perhaps border-bottom: transparent if that works).

You also don't need "transition: border 100ms ease-out" in the hover scope.

Upvotes: 3

Related Questions