Grenze-Stil allmählich erweitern css

Question

Ich möchte Grenze allmählich erweitern, obwohl ich nicht herausfinden kann, wo das Problem ist. Würde die Hilfe wirklich schätzen.

#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

Es ist eine schlechte Idee, zu spezifizieren und Wert in der gleichen Zeile zu ersetzen. Es macht keinen Sinn (Sie geben einen festen Rahmen an und weisen ihn einem Punkt zu). Auch Ihre Grenze fehlt im Anfangszustand, was ein Problem sein könnte.

#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

Sie können einfach Übergang wie folgt verwenden:

#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>