前端 - 使用：after和animation制作的遮罩层出现的问题？

Question

想做一个当网页打开时.d1有个淡出效果动画，但是d1始终是空白？

<p class="d1"></p>

    .d1{
        width: 20px;
        height: 20px;
        background-color: red;
        position: relative;
    }
    .d1:after{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 1;
        -webkit-animation: d1_mask 5s linear 0 forwards;
        animation: d1_mask 5s linear 0 forwards;
    }
    @keyframes d1_mask{
        0%{opacity: 1}
        100%{opacity: 0}
    }

Answer 1

animation: d1_mask 5s linear forwards;In this way, do not use forward and count at the same time

Answer 2

@keyframes also needs compatibility processing and vendor prefix; pay attention to the documentation!