Moving Endless CSS Border Animation Loops

Question

I grabbed this snippet of css code on the web that performs animation around the border of a button when it hangs. I am very pleased.

Is there a way to tweak it so that the endless loop loop animation does not hang?

here is the code:

button { background: none; border: 0; box-sizing: border-box; box-shadow: inset 0 0 0 2px #f45e61; color: #f45e61; font-size: inherit; font-weight: 700; margin: 1em; padding: 1em 2em; text-align: center; text-transform: capitalize; 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; } .draw::before, .draw::after { border: 2px 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 0.25s ease-out, height 0.25s ease-out 0.25s; transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; } .draw:hover::after { border-bottom-color: #60daaa; border-left-color: #60daaa; -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; } 

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

thanks

Answer 1

You can use almost the same styles, but with CSS animations instead of transitions.

 button { background: none; border: 0; box-sizing: border-box; box-shadow: inset 0 0 0 2px #f45e61; color: #f45e61; font-size: inherit; font-weight: 700; margin: 1em; padding: 1em 2em; text-align: center; text-transform: capitalize; vertical-align: middle; } .draw { overflow: hidden; position: relative; } .draw::before, .draw::after { content: ''; box-sizing: border-box; position: absolute; border: 2px solid transparent; width: 0; height: 0; } .draw::before { top: 0; left: 0; border-top-color: #60daaa; border-right-color: #60daaa; animation: border 2s infinite; } .draw::after { bottom: 0; right: 0; animation: border 2s 1s infinite, borderColor 2s 1s infinite; } @keyframes border { 0% { width: 0; height: 0; } 25% { width: 100%; height: 0; } 50% { width: 100%; height: 100%; } 100% { width: 100%; height: 100%; } } @keyframes borderColor { 0% { border-bottom-color: #60daaa; border-left-color: #60daaa; } 50% { border-bottom-color: #60daaa; border-left-color: #60daaa; } 51% { border-bottom-color: transparent; border-left-color: transparent; } 100% { border-bottom-color: transparent; border-left-color: transparent; } } 

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