Why is my transition not working on <hr>?

Question

I have this <div> and a <hr> in an <a>. When someone hovers the whole thing it should make a fluid animation.

.wrap:hover div{
  transition: all 2s;
  opacity: 0.6;
}

.wrap:hover hr{
  transition: all 2s linear;
  width: 200px;
}

.image{
  background-color: red;
  padding: 20px;
}

hr{
  min-width: 20px;
  float: left;
}

<a class="wrap">
  <div class="image">
     Content
  </div>
  <hr class="hr-animation">
</a>

The transition works at <div>. But why is my <hr> not fluid?

Answer 1

You need to use the same parameter in the original rule for hr as in the hover rule, which is width, not min-width:

.wrap:hover div{
  transition: all 2s;
  opacity: 0.6;
}

.wrap:hover hr{
  transition: all 2s linear;
  width: 200px;
}

.image{
  background-color: red;
  padding: 20px;
}

hr{
  width: 20px;
  float: left;
}

<a class="wrap">
  <div class="image">
     Content
  </div>
  <hr class="hr-animation">
</a>

Answer 2

You need to specify a width to start with and put the transition for the hr, not the hover.

.wrap:hover div {
  transition: all 2s;
  opacity: 0.6;
}

.wrap:hover hr {
  width: 200px;
}

.image {
  background-color: red;
  padding: 20px;
}

hr {
  min-width: 20px;
  float: left;
  transition: all 2s linear;
  width: 20px;
}

<a class="wrap">
  <div class="image">
    Content
  </div>
  <hr class="hr-animation">
</a>