Как сделать чтобы анимация вызванная :hover продолжалась до конца, независимо от положения мыши?

body { margin: 0; padding: 0; background-color: #8e3a89; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; align-items: center; } .svg { margin: 10px; width: 150px; height: 150px; } .sas { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 2550; } .svg:hover .sas { animation: animate 3s; } @keyframes animate { 0% { stroke-dashoffset: 2550; } 100% { stroke-dashoffset: 0; } }

Ответ

body { margin: 0; padding: 0; background-color: #8e3a89; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; align-items: center; } .svg { margin: 10px; width: 150px; height: 150px; border: 1px solid red; } .sas { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 2550; stroke-dashoffset: 0; }