htmlcsssvg-filters

feColorMatrix made circle disappear for a just while

I wrote a piece of simple code to make a blur circle roll out of a container.

index.html:

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

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

style.css:

* {
    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);
    }
}

If I commented out the "filter: url(#flt);" inside the ".container" in style.css, the black circle rolled out of the container as expected. However, the circle disappeared for a while during rolling if I added "filter: url(#flt);" back. I couldn't figure it out.

enter image description here

enter image description here

enter image description here

Solution

  • I was checking on codepen its working fine

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

    https://codepen.io/jojo129/pen/poVzxaK