Smoke Animation(Black)

http://127.0.0.1:5500/index.html

Smoke Animation

<br>
body{<br>
background:#000;<br>
}<br>
section {<br>
height:90vh;</p>
<div class="highlight"><pre class="highlight plaintext"><code> }
video {
object-fit: cover;
margin-left: 5px;
top:40%;
}
h1 {
position:absolute;
top:50%;
width:100%;
transform: translateY(-50%);
text-align:center;
font-family: sans-serif;
color:#ddd;
font-size: 5em;
letter-spacing: 0.1em;
}
h1 span {
opacity:0;
display:inline-block;
animation:animate 1s linear forwards;
}
@keyframes animate {
0% {
opacity:0;
transform: rotateY(90deg);
filter:blur(10px);
}
100% {
opacity:1;
transform: rotateY(0deg);
filter:blur(0);
}
}
h1 span:nth-child(1){
animation-delay:1s;
}
h1 span:nth-child(2){
animation-delay: 2s;
}
h1 span:nth-child(3){
animation-delay: 2.5s;
}
h1 span:nth-child(4){
animation-delay: 3s;
}
h1 span:nth-child(5){
animation-delay: 3.5s;
}
h1 span:nth-child(6){
animation-delay: 3.75s;
}
h1 span:nth-child(7){
animation-delay: 4s;
}
h1 span:nth-child(8){
animation-delay: 4.5s;
}
h1 span:nth-child(9){
animation-delay: 4.75s;
}
h1 span:nth-child(10){
animation-delay: 5s;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;section&gt;
&lt;video src="smoke.mp4" autoplay muted&gt;&lt;/video&gt;
&lt;h1&gt;
&lt;span&gt;D&lt;/span&gt;
&lt;span&gt;I&lt;/span&gt;
&lt;span&gt;M&lt;/span&gt;
&lt;span&gt;P&lt;/span&gt;
&lt;span&gt;L&lt;/span&gt;
&lt;span&gt;E&lt;/span&gt;
&lt;span&gt;W&lt;/span&gt;
&lt;span&gt;O&lt;/span&gt;
&lt;span&gt;R&lt;/span&gt;
&lt;span&gt;K&lt;/span&gt;
&lt;/h1&gt;
&lt;/section&gt;
&lt;/body&gt;
</code></pre></div>
<p></html><strong>``</strong></p>