CSS不透明动画不起作用

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

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

有什么不对的动画？

来源

2017-09-23 jcubic

也许你应该改变关键帧的名称，不透明度可能会导致冲突。检查控制台中是否有任何冲突 – Vivick

@Vivick将其更改为x并得到相同的结果，但没有动画。 – jcubic

删除冒号后0%和100%，你会得到的动画。尝试像这样：

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

来源

2017-09-23 09:19:38 skm

CSS不透明动画不起作用

回答

相关问题