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




            }