CSS & SVG Animation

Question

Ich arbeite an einem Button Hover-Effekt. Ich habe es geschafft, es bei Hover zu animieren, aber ich kämpfe um die Animation umzukehren.

Ich habe versucht, die Strich-Array und Offset zu ändern, aber keiner scheint effektiv zu arbeiten.

Hier ist mein Markup:

.btn { 
 
\t  background: #e02c26; 
 
    \t  font-weight: 100; 
 
    \t  color: #fff; 
 
    \t  cursor: pointer; 
 
    \t  display: inline-block; 
 
    \t  font-size: 16px; 
 
    \t  font-weight: 400; 
 
     \t line-height: 45px; 
 
     \t margin: 0 auto 2em; 
 
     \t max-width: 160px; 
 
     \t position: relative; 
 
     \t text-decoration: none; 
 
     \t text-transform: uppercase; 
 
     \t vertical-align: middle; 
 
     \t width: 100%; 
 
    } 
 

 
    .btn span { 
 
    \t position: absolute; 
 
\t  width: 100%; 
 
    \t text-align: center; 
 
    } 
 

 
    .btn svg { 
 
     \t height: 45px; 
 
     \t left: 0; 
 
     \t position: absolute; 
 
     \t top: 0; 
 
     \t width: 100%; 
 
    } 
 

 
    .btn rect { 
 
     \t fill: none; 
 
     \t stroke: #565656; 
 
     \t stroke-width: 2; 
 
    \t  stroke-dasharray: 422, 0; 
 
    } 
 

 
    .btn:hover { 
 
     \t background: rgba(225, 51, 45, 0); 
 
     \t font-weight: 900; 
 
     \t letter-spacing: 1px; 
 
    } 
 

 
    .btn:hover rect { 
 
    \t  stroke-width: 5; 
 
     \t stroke-dasharray: 15, 310; 
 
     \t stroke-dashoffset: 48; 
 
     \t -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); 
 
     \t transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); 
 
    }

<a href="#" class="btn"> 
 
     <svg> 
 
    \t  <rect x="0" y="0" fill="none" width="100%" height="100%"/> 
 
     </svg> 
 
     <span>Hover</span> 
 
    </a>

Answer 1

Sie müssen den Übergang auf den .rect und nicht auf schweben setzen, denn wenn man es auf schweben gesetzt, nur um den Übergang funktioniert auf Maus geben und nicht auf Maus aus,

Aber wenn Sie es auf die .rect setzen, wird es in beide Richtungen funktionieren.

den Übergang in .btn rect {...} statt .btn:hover rect {...}

Set

Siehe Code-Schnipsel:

.btn { 
 
    background: #e02c26; 
 
    font-weight: 100; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    font-weight: 400; 
 
    line-height: 45px; 
 
    margin: 0 auto 2em; 
 
    max-width: 160px; 
 
    position: relative; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    vertical-align: middle; 
 
    width: 100%; 
 
} 
 

 
.btn span { 
 
    position: absolute; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.btn svg { 
 
    height: 45px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
.btn rect { 
 
    fill: none; 
 
    stroke: #565656; 
 
    stroke-width: 2; 
 
    stroke-dasharray: 422, 0; 
 
    -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); 
 
    transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); 
 
} 
 

 
.btn:hover { 
 
    background: rgba(225, 51, 45, 0); 
 
    font-weight: 900; 
 
    letter-spacing: 1px; 
 
} 
 

 
.btn:hover rect { 
 
    stroke-width: 5; 
 
    stroke-dasharray: 15, 310; 
 
    stroke-dashoffset: 48; 
 
}

<a href="#" class="btn"> 
 
    <svg> 
 
     <rect x="0" y="0" fill="none" width="100%" height="100%"/> 
 
    </svg> 
 
    <span>Hover</span> 
 
</a>