Css анимация воображаемого существа в погоне за фигурой

Question

Используя CSS, я пытаюсь анимировать воображаемое существо, преследующее фигуру в лабиринте, не проходя через стены лабиринта. Воображаемое существо должно почти поймать фигуру в конце. Погоня начинается с начальной позиции, в которой они находятся в данный момент, и заканчивается на выходе. Расположение лабиринта находится на ссылке скрипки. Мне нужна помощь, чтобы понять анимацию. Мой ключевой кадр работает неправильно ( jsfiddle )

svg#figure {
height: 40px;
width: 40px;
position: absolute;
top: 100px;
left: 0px;
z-index: 2;
fill: red; 
stroke: black; 

/*    animation*/

animation-name: testfigure;
animation-duration: 2s;
animation-iteration-count: 1;
animation-direction:normal;
}

svg#monster {
fill: red;
fill-opacity: 0.5;
height: 40px;
width: 80px;
position: absolute;
top: 100px;
left: -100px;
z-index: 3;

/*animation*/
animation-name: testmonster;
animation-duration: 5s;
animation-iteration-count: 2;
animation-direction: normal;
animation-delay: -3s;
}



@keyframes testmonster {
0%   {background-color:red; left:38px;}
25%  {background-color:yellow; left:38px; top:0px;}
50%  {background-color:blue; left:100px; top:200px;}
75%  {background-color:green; left:80px; left:200px;}
100% {background-color:red; left:50px; top:100px;}
}




@keyframes testfigure {
0%   {background-color:red; left:38px;}
25%  {background-color:yellow; left:38px;top:0px;}
50%  {background-color:blue; left:35px; top:100px;}
/*75%  {background-color:green; top:50px; left:200px;}*/
/*100% {background-color:red; top:50px; top:50px;}*/
}

Answer 1

Я внес корректировку в свой CSS, чтобы исправить это.Хотя, вероятно, есть лучший способ сделать это.

svg#figure {
                height: 40px;
                width: 40px;
                position: absolute;
                top: 100px;
                left: 0px;
                z-index: 2;
                fill: red; 
                stroke: black; 

            /*    animation*/

                animation-name: testfigure;
                animation-duration: 15s;
                animation-iteration-count: 1;
                animation-direction:normal;
            }

            svg#monster {
                fill: red;
                fill-opacity: 0.5;
                height: 40px;
                width: 80px;
                position: absolute;
                top: 100px;
                left: -100px;
                z-index: 3;

                /*animation*/
                animation-name: testmonster;
                animation-duration: 15s;
                animation-iteration-count: 1;
                animation-direction: normal;
                animation-delay: 1s;
            }



            @keyframes testmonster {
                0%   {margin-left:120px}
                15%  {margin-top: -70px;}
                30%  {margin-left: 190px;}
                35%  {margin-top: 60px;}
                45%  {margin-left: 100px;margin-top:130px;}
                50%  {margin-left: 250px;}
                70%  {margin-top: -50px;}
                80% {margin-left: 310px;}
                100% {margin-top: 250px;margin-left: 0px;}
            }




            @keyframes testfigure {
                0%   {margin-left:38px}
                15%  {margin-top: -80px;}
                30%  {margin-left: 100px;}
                35%  {margin-top: 65px;}
                45%  {margin-left: 15px;margin-top: 130px;}
                50%  {margin-left: 165px;}
                70%  {margin-top: -50px;}
                80% {margin-left: 230px;}
                100% {margin-top: 250px;margin-left: 0px;}




            }