CSSボーダートランジション無限アニメーションループ

Question

私は、ホバリング時にボタンの境界線の周りにアニメーションを実行するインターネット上でthis snippet of 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; 
 
      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>

あなたは、ほぼ同じスタイルを使用しますが、CSSアニメーションの代わりに遷移にす​​ることができますあなたに

Answer 1

ありがとう：ここ

コードがあります。

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>