Анимация SVG не перезагружается ⇐ Html

[Anonymous]

Я пытаюсь установить анимированный SVG в качестве маски на Hover, это работает только один раз. Я вижу, что браузер не перезагружает анимацию, если через некоторое время или после того, как вся страница не будет перезагружена. < /P>
В некоторых случаях он снова работает случайным образом. Но я не знаю, как это исправить. < /P>

Код: Выделить всё

#container {
width: 200px;
height:200px;
background-color: yellow;
}

#container:hover{
mask-image: url("https://d2qk6ju4y4xfge.cloudfront.net/social-mail/site/snapshot/view/4VdFg4zPl4YKeNVBU1wqrQ/loA2BNta4i0yK3s6f9yvWw/animated-slices-veritcal.c3.svg");
mask-size: cover;
mask-repeat: no-repeat;
}< /code>

Slide 1
< /code>
< /div>
< /div>
< /p>
Это код SVG. < /p>




.top {
fill: #6B67FD;
stroke: #6B67FD;
stroke-width: 1;
animation: from-top 2s ease-in-out;
animation-fill-mode: both;
}
.bottom {
fill: #6B67FD;
stroke: #6B67FD;
stroke-width: 1;
animation: from-bottom 2s ease-in-out;
animation-fill-mode: both;
}
.r2 {
animation-delay: 0.1s;
}
.r3 {
animation-delay: 0.2s;
}
.r4 {
animation-delay: 0.4s;
}
.r5 {
animation-delay: 0.6s;
}
@keyframes from-top {
0% {
opacity: 0.5;
translate: -100%;
}
100% {
opacity: 1;
translate: 0;
}
}
@keyframes from-bottom {
0% {
opacity: 0.5;
translate: 100%;
}
100% {
opacity: 1;
translate: 0 0;
}
}

Анимация должна воспроизводить, когда я снова наведу мышь, но не перезапускается.


Подробнее здесь: https://stackoverflow.com/questions/797 ... restarting