Can you convert a video to pure CSS?

The article discusses the possibility of converting video content into pure CSS animations, focusing on the use of CSS scroll animations and the limitations of browser compatibility, particularly with Safari. It introduces the concept of using CSS properties like `scroll-timeline-name` and `animation-timeline` to create animations based on scroll position. However, due to Safari's lack of support for these features, the author suggests an alternative method that involves using JavaScript to set CSS variables based on scroll position, allowing for cross-browser compatibility. The article also explores the idea of animating divs based on pixel data extracted from video frames. It details a process for capturing pixel data from a video using a canvas element, generating CSS keyframes for each pixel, and positioning these divs to create a visual representation of the video. The author notes performance differences between browsers, highlighting that Safari handles larger CSS strings and more animated divs more efficiently than Chrome. The article concludes with examples of the animations created, emphasizing the challenges and potential of using CSS for video representation.

- CSS scroll animations can be created using new properties, but Safari lacks support for them.

- An alternative method using JavaScript to set CSS variables allows for cross-browser compatibility.

- The process of converting video frames into pixel data can be achieved using a canvas element.

- Performance varies significantly between browsers, with Safari outperforming Chrome in handling CSS animations.

- The article showcases the potential of CSS animations for video representation, despite technical challenges.