CSSAnim.css

.burns-outer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.burns-inner {
  position: absolute;
  width: calc(100% + 8em);
  height: calc(100% + 8em);
  top: -4em;
  left: -4em;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: initial;
}

.burns-inner {
  animation-name: burns;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-fill-mode: reverse;
  animation-delay: calc(var(--frame) * -1);
  animation-play-state: paused;
}

.burns-inner:after() {
  content: 'Frame: ';
  position: absolute;
  top: 10px;
  left: 10px;
  color: lime;
}

@keyframes burns {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(4em) translateY(-3em) scale(1.1);
  }
}

CSSAnim.tsx

import { useCurrentFrame, useVideoConfig, } from 'remotion';
import React, { useEffect, useRef } from 'react';
import './CSSAnim.css';
import bg from './code.jpg';

interface CSSAnimProps {
  color?: string;
}

export const CSSAnim: React.FC<CSSAnimProps> = ({ color = "black" }) => {
  const el = useRef<HTMLDivElement>(null);
  const config = useVideoConfig();
  const frame = useCurrentFrame();

  useEffect(()=>{
    if (el.current !== null) {
      el.current.style.animation = 'none';
      el.current.offsetHeight;
      el.current.style.animation = '';   
    }
  }, [frame])

  return (
    <div className="burns-outer" style={{
      backgroundColor: color,
    }}>
      <div ref={el} className={'burns-inner'} style={{
        backgroundImage: `url(${bg})`,
        "--frame": `${frame * (1000 / config.fps) }ms`,
      } as React.CSSProperties} >
      </div>
    </div>
  );
};

gistfile2.txt

A JPEG called code.jpg goes here. :)