CSS边框过渡无限动画循环

I've captured this snippet of css code on internet which perform an animation around the border of a button when hovering. I find it very nice.

我在internet上捕获了这个css代码片段，它在鼠标悬停时在按钮的边框上执行动画。我觉得很好。

Is there a way to customize it in order to make the border animation looping infinitely and not on hovering ?

是否有一种方法可以定制它以使边框动画无限循环而不是悬停?

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>

Thank You

谢谢你！

1 个解决方案

#1

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

您可以使用几乎相同的样式，但是使用CSS动画而不是转换。

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>