CSSの要素の変更をフェードインする方法

Question

要素を上に置いたときに、CSSの要素を編集してフェードインしようとしています。具体的には、solidからdottedへborderを変更すると、変更がフェードアウトするので、どうすればよいですか？

EDIT：

おそらく、私はここに私の現在のコードがある状況について具体的にする必要があります。

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

あなたがそれらを移行し、その後異なるストロークタイプで互いの上に2つのdivを置くことができます。

* { 
 
    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 2

Hereその効果を与えるいくつかのCSSの策略です。内側の欠点は透明にすることはできません。

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 3

あなたはpseudoelementsを使用してこれを達成することができます。このバージョンは透明な背景でも機能します。これを示すためにボディにグラデーションを追加しました。

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

それは洙エレガントな解決策ではないのですが、それは私の元の質問で「Nietダークアブソルの」コメントの消灯。コードは次のとおりです。

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; 
}