Fire effect css animation using html css

<section>
       <video src="https://www.tolmatol.com/uploads-images/fire-effect-bootstrap-4/fire.mp4" autoplay muted></video>
        <ul>
            <li>F</li>
        <li>I</li>
        <li>R</li>
        <li>E</li>
        </ul>
        <p class="web">www.tolmatol.com</p>
    </section>

 body { margin: 0; padding: 0; font-family: 'Courgette', cursive;}
        section { height: 100vh; background: #000;}
        ul {margin: 0; padding: 0; list-style-type: none; position:absolute; width:100%;  top:50%; transform: translateY(-50%); text-align: center; font-size:10em; } 
        ul li { display: inline-block;  animation: fire 1s linear forwards; opacity: 0; background: #f5d020;
background-image: linear-gradient(315deg, #f5d020 0%, #f53803 74%);  -webkit-background-clip: text; -webkit-text-fill-color: transparent;     letter-spacing: 12px; }
        .web { color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-bottom: 0px; opacity: 0;
        animation: web 3s  forwards;}
        video { object-fit: cover; width: 100%;}
         ul li:nth-child(1) {  animation-delay: .5s;}
        ul li:nth-child(2) { animation-delay: 1s;}
        ul li:nth-child(3) { animation-delay: 2s; }
        ul li:nth-child(4) {animation-delay: 3s; }
        
        @keyframes fire 
        {
            0% 
            { 
                opacity: 0; transform: rotateY(90deg); filter: blur(5px); 
            }
           100% 
            { 
                opacity: 1;  transform: rotateY(0deg); filter: blur(0px);
            }
        }
        @keyframes web 
        {
            0% 
            { 
                opacity: 0;  
            }
           100% 
            { 
                opacity: 0   margin-bottom: 0px;
            }
        }