국경 스타일 점차적으로 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>