The SVG Blobs are not animating when used with keyframes rule-CodePudding

I'm trying to implement a simple blob animation in the main page of my website. I am able to see the first blob svg but the animation does not seem to be working. Thanks in advance for all answers. I'm copy pasting my HTML & CSS rules here.

HTML:

                <div >
                    <div >
                        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="blob" width="600">
                            <path fill="#FE17A2" d="M59.1,-33.9C71.6,-12.5,73.4,15.4,61.7,35.4C50.1,55.4,25,67.5,-1.8,68.6C-28.7,69.6,-57.4,59.7,-69.8,39.2C-82.3,18.7,-78.5,-12.2,-64.1,-34.7C-49.8,-57.2,-24.9,-71.2,-0.8,-70.8C23.3,-70.3,46.6,-55.3,59.1,-33.9Z" transform="translate(100 100)" />
                        </svg>                              
                    </div>
                </div>

CSS:

.intro-img{
    height: 90vh;
    justify-content: center;
    text-align: center;
}

#blob{
    animation : blob 5s linear infinite;
}

@keyframes blob {
    0%{
        d : path("M67.2,-41.6C78.5,-19.4,72.9,9.7,58.9,34.3C44.8,58.9,22.4,78.9,-0.9,79.4C-24.2,79.9,-48.5,61,-59.4,38.2C-70.3,15.4,-67.9,-11.2,-55.8,-33.9C-43.6,-56.6,-21.8,-75.5,3.1,-77.2C28,-79,56,-63.8,67.2,-41.6Z");
    }
    25%{
        d : path("M68.3,-38.6C82.6,-14.7,84.2,17.4,70.6,38.1C57.1,58.7,28.6,68,2.4,66.6C-23.7,65.2,-47.4,53.1,-60,32.9C-72.7,12.8,-74.3,-15.5,-62.4,-38C-50.6,-60.4,-25.3,-77.1,0.9,-77.6C27,-78.1,54.1,-62.4,68.3,-38.6Z");
    }
    50%{
        d : path("M65.4,-37C79.1,-14.1,80.5,16.6,67.5,37C54.6,57.5,27.3,67.8,0,67.8C-27.3,67.8,-54.6,57.5,-66.3,37.8C-78,18,-74.1,-11.3,-60.5,-34.2C-46.8,-57,-23.4,-73.5,1.2,-74.2C25.9,-74.9,51.8,-59.9,65.4,-37Z");
    }
    75%{
        d : path("M57.1,-35.2C68.5,-13.3,68.3,13,56.8,32.4C45.4,51.9,22.7,64.4,-1.4,65.2C-25.6,66.1,-51.2,55.2,-63,35.5C-74.9,15.9,-73,-12.6,-60.2,-35.3C-47.4,-58,-23.7,-74.9,-0.4,-74.7C22.9,-74.4,45.8,-57,57.1,-35.2Z");
    }
    100%{
        d : path("M67.2,-41.6C78.5,-19.4,72.9,9.7,58.9,34.3C44.8,58.9,22.4,78.9,-0.9,79.4C-24.2,79.9,-48.5,61,-59.4,38.2C-70.3,15.4,-67.9,-11.2,-55.8,-33.9C-43.6,-56.6,-21.8,-75.5,3.1,-77.2C28,-79,56,-63.8,67.2,-41.6Z");
    }
}

CodePudding user response：

I have found the issue, when writing the animation rule for the blob include path (the one you are trying to animate here) to the selector so instead of using:

#blob{
    animation : blob 5s linear infinite;
}

Use:

#blob path{
    animation: blob 5s linear infinite;
}

CodePudding user response：

.intro-img{
    height: 90vh;
    justify-content: center;
    text-align: center;
}

#blob path {
    animation : blob 5s linear infinite;    
    
}

@keyframes blob {
    0%{
        d : path("M67.2,-41.6C78.5,-19.4,72.9,9.7,58.9,34.3C44.8,58.9,22.4,78.9,-0.9,79.4C-24.2,79.9,-48.5,61,-59.4,38.2C-70.3,15.4,-67.9,-11.2,-55.8,-33.9C-43.6,-56.6,-21.8,-75.5,3.1,-77.2C28,-79,56,-63.8,67.2,-41.6Z");
    }
    25%{
        d : path("M68.3,-38.6C82.6,-14.7,84.2,17.4,70.6,38.1C57.1,58.7,28.6,68,2.4,66.6C-23.7,65.2,-47.4,53.1,-60,32.9C-72.7,12.8,-74.3,-15.5,-62.4,-38C-50.6,-60.4,-25.3,-77.1,0.9,-77.6C27,-78.1,54.1,-62.4,68.3,-38.6Z");
    }
    50%{
        d : path("M65.4,-37C79.1,-14.1,80.5,16.6,67.5,37C54.6,57.5,27.3,67.8,0,67.8C-27.3,67.8,-54.6,57.5,-66.3,37.8C-78,18,-74.1,-11.3,-60.5,-34.2C-46.8,-57,-23.4,-73.5,1.2,-74.2C25.9,-74.9,51.8,-59.9,65.4,-37Z");
    }
    75%{
        d : path("M57.1,-35.2C68.5,-13.3,68.3,13,56.8,32.4C45.4,51.9,22.7,64.4,-1.4,65.2C-25.6,66.1,-51.2,55.2,-63,35.5C-74.9,15.9,-73,-12.6,-60.2,-35.3C-47.4,-58,-23.7,-74.9,-0.4,-74.7C22.9,-74.4,45.8,-57,57.1,-35.2Z");
    }
    100%{
        d : path("M67.2,-41.6C78.5,-19.4,72.9,9.7,58.9,34.3C44.8,58.9,22.4,78.9,-0.9,79.4C-24.2,79.9,-48.5,61,-59.4,38.2C-70.3,15.4,-67.9,-11.2,-55.8,-33.9C-43.6,-56.6,-21.8,-75.5,3.1,-77.2C28,-79,56,-63.8,67.2,-41.6Z");
    }
}

<div >
                    <div >
                        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="blob" width="600">
                            <path fill="#FE17A2" d="M59.1,-33.9C71.6,-12.5,73.4,15.4,61.7,35.4C50.1,55.4,25,67.5,-1.8,68.6C-28.7,69.6,-57.4,59.7,-69.8,39.2C-82.3,18.7,-78.5,-12.2,-64.1,-34.7C-49.8,-57.2,-24.9,-71.2,-0.8,-70.8C23.3,-70.3,46.6,-55.3,59.1,-33.9Z" transform="translate(100 100)" />
                        </svg>                              
                    </div>
                </div>