CSS不透明アニメーションが機能しない

Question

不透明度を0から1にアニメーション化して白いアニメーションにフェードアウトさせたい場合は、最初に疑似要素の前に使用しましたが機能しませんでした。ここでは同じ結果コードされています。このアニメーションと間違って何

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

：

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>

私の最初のキーフレームは、このようなものでしたか？

Answer 1

0%と100%の後にコロンを削除すると、アニメーションが表示されます。

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