想做一个当网页打开时.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}
    }