CSS Sınır geçişleri sonsuz animasyon döngüsü

Question

Internet üzerinde gezinirken bir düğmenin kenarlığı çevresinde bir animasyon gerçekleştiren internet üzerinde this snippet of css kodunu yakaladım. Onu çok güzel buluyorum.

Kenarlık animasyonu sınırsız döngü yapmak için değil, gezinmek için onu özelleştirmenin bir yolu var mı?

 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>

You yerine geçişlerin

Answer 1

Neredeyse aynı stilleri kullanabilirsiniz, ancak CSS animasyonları ederiz: Burada

kodudur.

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>