요소 경계선 그리기 (애니메이션)

Question

버튼을 누군가가 그리는 것처럼 보이게하는 방법을 알아 내려고하고 있습니다.

가장 근접한 것은이 스 니펫입니다. 테두리 반경 세트로는 잘 작동하지 않지만 모두이 스 니펫입니다. 내가 SVG 파일을 사용하지 않도록하기 위해 노력하고있어

https://codepen.io/anon/pen/MbWagQ

<button class="draw">draw</button> 

//Colors 
$cyan: #60daaa; 
$red: #f45e61; 

// Basic styles 
button { 
    background: none; 
    border: 0; 
    box-sizing: border-box; 
    color: $red; 
    font-size: inherit; 
    font-weight: 700; 
    padding: 1em 2em; 
    text-align: center; 
    margin: 20px; 

    // Required, since we're setting absolute on pseudo-elements 
    position: relative; 
    vertical-align: middle; 

    &::before, 
    &::after { 
    box-sizing: border-box; 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    } 
} 

.draw { 
    transition: color 0.25s; 
    border-radius: 7px; 

    &::before, 
    &::after { 
    border-radius: 7px; 
    border: 3px solid transparent; // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts 
    width: 0; 
    height: 0; 
    } 

    // This covers the top & right borders (expands right, then down) 
    &::before { 
    top: 0; 
    left: 0; 
    } 

    // And this the bottom & left borders (expands left, then up) 
    &::after { 
    bottom: 0; 
    right: 0; 
    } 

    &:hover { 
    color: $cyan; 
    } 

    // Hover styles 
    &:hover::before, 
    &:hover::after { 
    width: 100%; 
    height: 100%; 
    } 

    &:hover::before { 
    border-top-color: $cyan; // Make borders visible 
    border-right-color: $cyan; 
    transition: 
     width 0.25s ease-out, // Width expands first 
     height 0.25s ease-out 0.25s; // And then height 
    } 

    &:hover::after { 
    border-bottom-color: $cyan; // Make borders visible 
    border-left-color: $cyan; 
    transition: 
     border-color 0s ease-out 0.5s, // Wait for ::before to finish before showing border 
     width 0.25s ease-out 0.5s, // And then exanding width 
     height 0.25s ease-out 0.75s; // And finally height 
    } 
} 

(모서리를 시청), 바람직하게는 나는 순수 HTML & CSS에서이 작업을 수행하고 싶지만 자바 스크립트는 괜찮습니다.

Answer 1

그래서 전환이 시작될 때 draw::before/draw::after 요소의 크기가 0px입니다. 즉, 경계 반경이 매우 비뚤어 질 것입니다./확대 당신은 문제가 무엇인지 볼 수있는 애니메이션을 늦추고 후

button { 
 
    background: none; 
 
    border: 0; 
 
    box-sizing: border-box; 
 
    color: #f45e61; 
 
    font-size: inherit; 
 
    font-weight: 700; 
 
    padding: 200px; 
 
    text-align: center; 
 
    margin: 20px; 
 
    position: relative; 
 
    vertical-align: middle; 
 
} 
 
button::before, 
 
button::after { 
 
    box-sizing: border-box; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.draw { 
 
    -webkit-transition: color 0.25s; 
 
    transition: color 0.25s; 
 
    border-radius: 70px; 
 
} 
 
.draw::before, 
 
.draw::after { 
 
    border-radius: 70px; 
 
    border: 30px solid transparent; 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.draw::before { 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.draw::after { 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
.draw:hover { 
 
    color: #60daaa; 
 
} 
 
.draw:hover::before, 
 
.draw:hover::after { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.draw:hover::before { 
 
    border-top-color: #60daaa; 
 
    border-right-color: #60daaa; 
 
    -webkit-transition: width 1.25s ease-out, height 1.25s ease-out 1.25s; 
 
    transition: width 1.25s ease-out, height 1.25s ease-out 1.25s; 
 
} 
 
.draw:hover::after { 
 
    border-bottom-color: #60daaa; 
 
    border-left-color: #60daaa; 
 
    -webkit-transition: border-color 0s ease-out 2.5s, width 1.25s ease-out 2.5s, height 1.25s ease-out 3.75s; 
 
    transition: border-color 0s ease-out 2.5s, width 1.25s ease-out 2.5s, height 1.25s ease-out 3.75s; 
 
}

<h1>CSS Border Transitions</h1> 
 
<button class="draw">draw</button>

. 나는 또한 'Drawing Point'가 이상한 모양이되는 것을 피하기 위해 높이가 전환 될 때까지 오른쪽/왼쪽 테두리에 전환을 배치하는 것이 좋습니다. 여기

는 왜곡되고 내가 경계 반경 무엇을 의미하는 또 다른 예입니다

http://codepen.io/anon/pen/mOdOyQ