div设置relative定位时keyframes动画失效问题咨询

动画失效是两个CSS基础规则共同导致的，和keyframes本身无关：

• 你使用的旧版clip: rect()属性仅对position: absolute/position: fixed定位的元素生效，这是CSS规范明确规定的，对relative、static定位的元素设置clip不会产生任何裁剪效果。你把.bb及其伪元素的定位从absolute改成relative后，clip直接失效，关键帧里的裁剪逻辑完全不执行，动画自然看不到效果。
• 同时给元素设置top:0; right:0; bottom:0; left:0的拉伸逻辑，只在绝对/固定定位元素上生效。相对定位元素的尺寸优先由width/height决定，四个方向偏移同时设为0不会触发拉伸，会直接导致伪元素的尺寸、位置计算完全错乱，就算clip生效也无法显示预期的边框效果。

你之前想把定位改成relative，本质是想解决多个div同时渲染时全部重叠的问题，不需要改动动画核心元素的定位，只要调整布局结构即可。

保留.bb和其伪元素的position: absolute设置，给每个动画模块加一层相对定位的外层容器，让内部的绝对定位元素相对于各自的容器定位，容器本身在普通文档流里自然排列，就可以实现多个动画div依次排布、互不重叠的效果。
修复后的完整代码如下：

{% block name %}
<style>
    /* 单个动画模块的外层容器，负责布局排列 */
    .bb-container {
        position: relative;
        width: 200px;
        height: 210px;
        margin: 0 auto;
    }
    .bb::before,
    .bb::after,
    .bb {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .bb {
        width: 200px;
        height: 200px;
        color: #69ca62;
        box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
    }
    .bb::before,
    .bb::after {
        content: "";
        z-index: -1;
        margin: -5%;
        box-shadow: inset 0 0 0 2px;
        animation: clipMe 8s linear infinite;
    }
    .bb::before {
        animation-delay: -4s;
    } 
    .bb:hover::after,
    .bb:hover::before {
        background-color: rgba(255, 0, 0, 0.3);
    }

    @keyframes clipMe {
        0% {
            clip: rect(0px, 220px, 2px, 0px);
        }
        25% {
            clip: rect(0px, 2px, 220px, 0px);
        }
        50% {
            clip: rect(218px, 220px, 220px, 0px);
        }
        75% {
            clip: rect(0px, 220px, 220px, 218px);
        }
        100% {
            clip: rect(0px, 220px, 2px, 0px);
        }
    }
    html,
    body {
        height: 100%;
    }

    body {
        background-color: #0f222b;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
</style>
{% for i in 0..2 %}
    <div class="bb-container">
        <div class="bb"></div>
    </div>
{% endfor %}
{% endblock %}

补充说明：旧版clip属性已经被W3C废弃，后续如果需要更灵活的裁剪效果，可以替换为clip-path属性，clip-path对所有定位类型的元素都能生效，不需要强制绑定绝对定位。

内容的提问来源于stack exchange，提问作者Samael