保存动画结果

Question

我写了这样的东西：

 <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>

当我将鼠标悬停在 svg 上时，这是一个动画，笔触隐约可见我需要在动画结束时将笔画保存到鼠标悬停

有人知道吗？

Answer 1

你可以依靠 forwards 和 animation-play-state 来模拟这个。诀窍是移动您需要保留在动画中的所有样式，然后转发将完成保存它们的工作

.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>

保存动画结果

Saving the result of animation

css

keyframe

css-animations