Reports

Good morning,

sorry but I would need a more detailed explanation.

Do you want the circle to always be blurry?

However, i analyzed its HTML and CSS code.

I found some errors:

In the HTML:

At Line 9:

Tag must be paired, no start tag: [< /style>] (without space)

At line 18:

The html element name of [ feGaussianBlur ] must be in lowercase.

At line 19:

The html element name of [ feColorMatrix ] must be in lowercase.

For the CSS:

Unexpected duplicate selector ".container .circle", first used at line 22

Here you are the corrected code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    position: relative;
    width: 500px;
    display: flex;
    filter: url(#flt);  
    background-color: bisque;
}

.container .circle {
    background-color: #000;
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    animation: leftM 5s ease-in-out 2s forwards;
}

svg {
    display: none;
}

@keyframes leftM {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(600px);
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style><title></title>
    <link rel="stylesheet" href="style.css">
    </style>
</head>

<body>
    <div class="container">
        <div class="circle"></div>
    </div>
    <svg>
        <filter id="flt">
            <fegaussianblur in="SourceGraphic" stdDeviation="8"></fegaussianblur>
            <fecolormatrix type="matrix" values="
            1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 2 -1
            "></fecolormatrix>
        </filter>
    </svg>
</body>

</html>

79517575