Drawing the border of an element (animation)

Question

I am trying to understand how the animation button of its border, as if someone was drawing it.

The closest thing I got to this fragment, although it does not work very well with a set of radius. (watch angles)

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

I am trying to avoid using svg files, preferably, I would like to do this in pure html and css, but javascript is fine.

Answer 1

So what happens, your draw::before/draw::after elements are 0px high at the beginning of your transition. This means that the radius of the border will be very distorted.

 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> 

After increasing / slowing down the animation, you can see what the problem is. I would also recommend putting the transition on the right / left border until the height has moved to avoid the “curly dot”, which is a strange shape.

Here is another example of what I mean when the distorted border radius:

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