Saving the result of animation - css

Question

I wrote something like this:
<svg class="svg-cab" height="35px" width="35px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 228.7">
<defs><style>
.cls-21{
fill:white;
cursor: pointer; }
.svg-cab:hover .cls-21{
stroke-dasharray: 1000;stroke-miterlimit:10;stroke-width:20px;
stroke-dashoffset: 1000;
animation: dash 1s linear;
stroke: white;
}
#keyframes dash {
from {
stroke-dashoffset: 999;
}
to {
stroke-dashoffset: 0;
}
}
</style></defs><path class="cls-21" d="M277.3,192.9a53.3,53.3,0,1,1-51.6-51.5A53.3,53.3,0,0,1,277.3,192.9Z" transform="translate(-123 -136.3)"/><path class="cls-21" d="M269.3,264H178.7A50.7,50.7,0,0,0,128,314.7V352a8,8,0,0,0,8,8H312a8,8,0,0,0,8-8V314.7A50.7,50.7,0,0,0,269.3,264Z" transform="translate(-123 -136.3)"/></svg></a>
It s an animation when I hover on the svg the stroke looms over it
and I need to when animation has been ended the stroke was saved till mouseover
Does anyone have any idea?

Answer 1

You can rely on forwards and animation-play-state to simulate this. The trick is to move all the style that you need to keep inside an animation and forwards will do the job of saving them
.cls-21 {
fill: red;
cursor: pointer;
animation:
dash 1s linear paused forwards,
stroke 1s linear paused forwards;
}
.svg-cab:hover .cls-21 {
stroke-dasharray: 1000;
stroke-miterlimit: 10;
animation-play-state: running;
}
#keyframes dash {
from {
stroke-dashoffset: 999;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes stroke {
1%,100% {
stroke: white;
stroke-width: 20px;
}
}
<svg class="svg-cab" height="35px" width="35px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 228.7">
<path class="cls-21" d="M277.3,192.9a53.3,53.3,0,1,1-51.6-51.5A53.3,53.3,0,0,1,277.3,192.9Z" transform="translate(-123 -136.3)"/><path class="cls-21" d="M269.3,264H178.7A50.7,50.7,0,0,0,128,314.7V352a8,8,0,0,0,8,8H312a8,8,0,0,0,8-8V314.7A50.7,50.7,0,0,0,269.3,264Z" transform="translate(-123 -136.3)"/></svg>