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; }
}

CSS 不透明动画不起作用

CSS opacity animation don't work

css

animation

opacity