Why isn't my SVG 'frame' animation playing on hover? - html

Question

I'm stuck on this CSS animation.
The frame should be animated when hovering. Start from the top center and draw the line through to the end.
Does anyone have a solution for this?
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
font-family: 'Roboto', sans-serif;
}
a.teaser-card-link {
text-decoration: none;
}
.card{
background-size: cover !important;
background-repeat: no-repeat !important;
max-width: 425px;
border-radius: 10px;
overflow: hidden;
}
.caption {
padding: 20px;
}
.dark-cover:hover {
background: url('https://svgshare.com/i/cP2.svg');
background-repeat: no-repeat;
background-attachment: fixed;
}
.card .caption p.card-title{
font-size: 22px;
font-weight: bold;
text-align: left;
margin: 0;
padding: 0;
letter-spacing: 1px;
padding-bottom: 20px;
margin-top: 10px;
}
.card .caption p.card-description{
font-size: 16px;
font-weight: 300;
text-align: left;
margin: 0;
padding: 0;
letter-spacing: 1px;
line-height: 1.5em;
padding-bottom: 20px;
}
.card .caption a.link-text{
font-size: 16px;
font-weight: 300;
text-align: left;
margin: 0;
padding: 0;
letter-spacing: 1px;
line-height: 1.5em;
text-decoration: none;
color: blue;
}
a.teaser-card-link {
text-decoration: none;
}
<div class="card">
<div class="dark-cover">
<div class="cover">
<img src="https://i.stack.imgur.com/jLbFE.png" class="card-image">
<div class="caption">
<p class="card-title">CARD-TEST</p>
<p class="card-description">Hier kannst du dich austauschen und offen über deine Gefühle und Sorgen sprechen.</p>
Hier mehr erfahren
</div>
</div>
</div>
</div>
HTML/CSS that I've got so far. I dont know which technique would be the best for this. SVG, PNG or pure CSS since this is technically a border.
<svg class="svg-border" xmlns="http://www.w3.org/2000/svg" width="409" height="273" viewBox="0 0 409 273" fill="none">

Answer 1

You can add the code of the svg and add transition to stroke-dashoffset property
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
a.teaser-card-link {
text-decoration: none;
}
.card {
background-size: cover !important;
background-repeat: no-repeat !important;
max-width: 425px;
border-radius: 10px;
overflow: hidden;
}
.caption {
padding: 20px;
}
.svg-border {
position: absolute;
left: 0;
}
.dark-cover .svg-border path {
stroke-dasharray: 0 1213 0;
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s;
}
.dark-cover:hover .svg-border path {
stroke-dasharray: 0 1213 0;
stroke-dashoffset: 1213;
}
.card .caption p.card-title {
font-size: 22px;
font-weight: bold;
text-align: left;
margin: 0;
padding: 0;
letter-spacing: 1px;
padding-bottom: 20px;
margin-top: 10px;
}
.card .caption p.card-description {
font-size: 16px;
font-weight: 300;
text-align: left;
margin: 0;
padding: 0;
letter-spacing: 1px;
line-height: 1.5em;
padding-bottom: 20px;
}
.card .caption a.link-text {
font-size: 16px;
font-weight: 300;
text-align: left;
margin: 0;
padding: 0;
letter-spacing: 1px;
line-height: 1.5em;
text-decoration: none;
color: blue;
}
a.teaser-card-link {
text-decoration: none;
}
<div class="card">
<div class="dark-cover">
<div class="cover">
<img src="https://i.ibb.co/RBfxDkJ/Vector.png" class="card-image">
<svg class="svg-border" xmlns="http://www.w3.org/2000/svg" width="409" height="273" viewBox="0 0 409 273" fill="none">
<path d="M359.013 249.05L359.036 249.048L359.059 249.046C372.423 248.323 381.287 246.263 387.415 241.958C393.488 237.693 397.044 231.098 399.478 220.852C400.472 214.751 401.014 208.608 401.099 202.457L401.1 202.441L401.1 202.425C401.826 185.916 402.511 169.404 403.196 152.896C404.578 119.605 405.96 86.33 407.667 53.1237L407.667 53.1207C407.881 49.1784 407.591 42.6982 406.02 36.1632C404.444 29.6075 401.617 23.1541 396.874 19.0845L396.84 19.0556L396.809 19.0239C392.109 14.2522 386.196 10.3001 379.441 7.43138C372.686 4.56277 365.245 2.84438 357.595 2.39153L357.577 2.39046L357.559 2.38879C353.731 2.03166 349.539 1.90534 344.812 2.12084C320.437 3.23341 296.153 4.18062 271.921 5.12577C210.717 7.51297 149.85 9.88705 88.7201 14.8793C68.9517 16.5477 53.3328 18.7741 41.1174 22.149C28.9037 25.5236 20.1743 30.0247 14.1071 36.1869C1.99865 48.4848 0.131327 67.7789 3.41751 99.5416L3.41766 99.5431C7.51328 139.68 13.2423 179.816 18.9615 219.884C19.8603 226.181 20.7589 232.476 21.6509 238.769C23.367 250.056 26.583 257.426 32.8765 262.282C39.2232 267.179 48.8871 269.672 63.8952 270.686C81.9828 271.846 100.195 271.458 118.405 271.071C127.516 270.877 136.626 270.684 145.72 270.684C153.108 270.684 183.491 267.861 219.692 264.118C255.851 260.379 297.714 255.732 327.984 252.102L327.995 252.101L328.006 252.1L359.013 249.05Z" stroke="#D76119" stroke-width="2.1225"/>
</svg>
<div class="caption">
<p class="card-title">CARD-TEST</p>
<p class="card-description">Hier kannst du dich austauschen und offen über deine Gefühle und Sorgen sprechen.</p>
Hier mehr erfahren
</div>
</div>
</div>
</div>