CSS不透明度动画不起作用

Question

我想将不透明度从0设置为1，因此它显示淡出到白色动画，首先我在伪元素之前使用但它不起作用所以我用div替换它但得到相同的结果这里是代码：

body { 
    background: black;
}
.tv {
    height: 100vh;
    position: relative;
}
.white {
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: white;
    z-index: 1;
    opacity: 0;
    /* infinite while debugging */
    animation: opacity 5s ease-out infinite;
    animation-fill-mode: forwards;
}

@keyframes opacity {
    0%: { opacity: 0 }
    100%: { opacity: 1; }
}

<div class="tv">
   <div class="white"></div>
</div>

我的第一个关键帧是这样的：

@keyframes opacity {
    to: { opacity: 1; }
}

这个动画有什么问题？

Answer 1

在0%和100%之后移除冒号，您将获得动画。试试这样：

@keyframes opacity {
    0% { opacity: 0 }
    100% { opacity: 1; }
}