Comment faire apparaître en fondu les modifications apportées aux éléments en CSS

Question

J'essaie de faire apparaître en fondu les modifications apportées aux éléments en CSS lorsqu'un élément est survolé. Plus précisément, il s'agit de modifier un border de solid a dotted en faisant disparaître le changement, comment je fais ça ?

EDIT :

Peut-être faut-il que je sois plus précis sur le contexte : voici mon code actuel :

li {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: black;
  border-bottom: 1px solid black;
}

li:hover {
  border-bottom: 1px dotted black;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

Answer 1

Ici est une astuce CSS qui donne cet effet. L'inconvénient est que l'intérieur ne peut pas être transparent.

div {
  position: relative;
  width: 50px;
  height: 50px;
  display: block;
  border: 3px dotted red;
  background: red;
  transition: 1s ease-in-out all;
}

div:after {
  position: absolute;
  content: ' ';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
}

div:hover {
  background: transparent;
}

<div></div>

Answer 2

Vous pourriez placer deux divs l'un sur l'autre avec des types de traits différents, puis les faire disparaître.

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
}
div {
  width: 11rem;
  height: 11rem;
  margin: auto;
  background-color: #f2f2f2;
  border: 5px #bbb solid;
  border-radius: 2rem;
  opacity: 1;
  cursor: pointer;
}
.dotted {
  border: 5px #bbb dotted;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
  z-index: 0;
}
.solid {
  position: relative;
  z-index: 1;
  transition: opacity 1s;
}
.solid:hover {
  opacity: 0;
}

<div class="solid"></div>
<div class="dotted"></div>

Answer 3

Vous pouvez y parvenir en utilisant des pseudo-éléments. Cette version fonctionne même avec un fond transparent. J'ai ajouté un gradient au corps pour le montrer.

div {
  position: relative;

  /* just styles for demo */
  width: 250px;
  height: 250px;
  border-width: 5px;
  border-style: solid;
  transition: 1s ease-in-out all;
  border-radius: 10px;
}

div:after {
  position: absolute;
  content: ' ';
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  border-width: inherit;
  border-style: dotted;
  border-radius: inherit;
}

div, div:after {
  border-color: tomato;
}

div:hover {
  border-color: transparent;
}

/* just styles for demo showing that this will work even for transparent background */
body {
  background-image: linear-gradient(to bottom, transparent, #ddd);
  min-height: 100vh;
  margin: 0;
}

<div></div>

Answer 4

Ce n'est pas une solution très élégante mais elle s'inspire du commentaire de "Niet the Dark Absol" sur ma question initiale. Voici le code :

li {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: black;
  position: relative;
  border-bottom: 1px solid transparent; /* invisible border */
}

li:before, li:after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  margin: -1px; /* same as border width */
  transition: opacity 1s linear;
}

li:before {
  border-bottom: 1px solid #000;
}

li:after {
  border-bottom: 1px dotted #000;
  opacity: 0;
}

li:hover:before {
  opacity: 0;
}

li:hover:after {
  opacity: 1;
}