Can you convert a video to pure CSS?
dgerrells.com
Can you convert a video to pure CSS?
1–10 of 15 posts
Re: Can you convert a video to pure CSS?
#2Animating timeline via css variable causes restyle cascade for all descendant elements. Maybe it is fine for shallow structure but generally it’s much more performant to change transformation directly. Of course that makes it less convenient as computation would have to be duplicated in js
Re: Can you convert a video to pure CSS?
#3Hillarious! Soon enough people will rebuild entire browsers with box shadows :)
Re: Can you convert a video to pure CSS?
#4The first demo doesn't work for me in Firefox, either.
Re: Can you convert a video to pure CSS?
#5Impressive!
Uploaded a 32mb video, played a few frames and immediately crashed my tab, honestly, that's also impressive, chrome rarely crash like this :D
NB: using scroll to play video frame by frame is nice but on macos you can hide the scrollbar which makes it not very obvious that you can do that
Re: Can you convert a video to pure CSS?
#6I was going to rant something about open standards and how they did not care to test this toy on Firefox (but they did it test it on safari), but I grew tired.
Re: Can you convert a video to pure CSS?
#7Hillarious! Soon enough people will rebuild entire browsers with box shadows :)
Don’t give the guy bad ideas! At this stage, his blog posts are cries for help. Is there a css anonymous org out there?
Re: Can you convert a video to pure CSS?
#8The first demo doesn't work for me in Firefox, either.
I thought so, but when I came back to the tab later it was working, and was able to go through all examples. Unlike Chrome who crashed halfway through the page.
Re: Can you convert a video to pure CSS?
#9Title reminded me of this video (although not exactly the same thing as in the article):
Re: Can you convert a video to pure CSS?
#10I was going to rant something about open standards and how they did not care to test this toy on Firefox (but they did it test it on safari), but I grew tired.
According to MDN, the feature can be enabled in Firefox by enabling layout.css.scroll-driven-animations.enabled in Firefox (though the demos don't work, looks like there are still some implementation bugs).
I don't really mind proof of concept demos like these only working in some browsers. The feature is still useless on real websites, but who cares about a silly cat GIF made up of CSS boxes not working.