CSS - yet another transition not working question

Question

Trying to understand transition css property, but can't seem to figure out why this code is not working. Border needs to go from solid to dotted

.home {
  color: #ff652f;
  font-weight: 700;
  border-bottom: 18px solid #ff652f;
  -webkit-transition: border-bottom 3s ease-in-out;
  transition: border-bottom 3s ease-in-out;
}

.home {
  border-bottom: 18px dashed #ff652f;
}

Made a jsfiddle here - https://jsfiddle.net/h7925b8g/

Would like the transition to happen slowly. Any ideas what I am doing wrong? Any help is greatly appreciated!

Answer 1

As mentioned in comments, border-style is not animatable, so you can't simply use the transition property to change it.

Instead, you can fake it. How exactly you pull this off depends on what you want the transition to look like. One approach is to use a repeating linear-gradient for the dashed effect and then transition that to overlay the border (either a literal border or just some other element that acts like a border).

For example, sliding up from the bottom:

.home {
  color: #ff652f;
  font-weight: 700;
  width: 200px;
  padding-bottom: 10px;
  position: relative;
}

.home::before,
.home::after {
  content: '';
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.home::before {
  height: 10px;
  background-color: orange;
  z-index: 0;
}

.home::after {
  height: 0px;
  transition: height 350ms ease;
  background-image: linear-gradient(to right, white 0px 10px, orange 10px 20px, white 20px);
  background-size: 20px 100%;
  background-repeat: repeat;
  z-index: 1;
}

.home:hover::after {
  height: 10px;
}

<div class="home">Hover me!</div>

Or sliding in from the left:

.home {
  color: #ff652f;
  font-weight: 700;
  width: 200px;
  padding-bottom: 10px;
  position: relative;
}

.border-animation {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 10px;
  overflow: hidden;
  background-color: orange;
}

.border-animation::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-image: linear-gradient(to right, white 0px 10px, orange 10px 20px, white 20px);
  background-size: 20px 100%;
  background-repeat: repeat;
  transform: translateX(-100%);
  transition: transform 350ms ease;
}

.home:hover .border-animation::after {
  transform: translateX(0);
}

<div class="home">Hover me!<span class="border-animation"></span></div>