border-style徐々にCSSを広げて

Question

私は問題がどこにあるのか分かりませんが、徐々に境界を広げたいと思います。本当に助けに感謝します。

#green1 { 
background-color: green; 
width: 50%; 
height: 10%; 
float: right; 
} 
    #green1:hover { 
    animation-name:border; 
    animation-duration:3s;} 

@keyframes border { 


0% { 
    border:0px; 
    border-style:none;} 
15% { border:1px solid black; border-style:dotted;} 
35% { border:2px solid black; border-style:dotted;} 
50% { border:4px solid black; border-style:dotted;} 
75% { border:6px solid black; border-style:dotted;} 

100% { border:8px solid black; border-style:dotted;}} 

Answer 1

それは同じ行の値を指定して交換することが悪い考えです。それは意味をなさない（あなたは実線の境界線を指定し、点線で囲むように再割り当てする）。また、問題の可能性がある初期状態では、国境が欠けています。

#green:hover { 
 
    display: inline-block; 
 
    border: 0px dotted black; 
 
    animation: border 3s; 
 
} 
 

 
@keyframes border { 
 
0% { border-width:0px;} 
 
15% { border-width:1px;} 
 
35% { border-width:2px;} 
 
50% { border-width:4px;} 
 
75% { border-width:6px;} 
 
100% { border-width:8px;} 
 
}

<div id="green">Some text</div>

Answer 2

あなたは、単にこのようにトランジションを使用することができます。

#green1 { 
 
    background-color: green; 
 
    width: 500px; 
 
    height: 100px; 
 
    float: right; 
 
    border: 0px solid black; 
 
    transition:border 3s; 
 
} 
 

 
#green1:hover { 
 
    border: 8px solid black; 
 
}

<div id="green1"></div>