Suits’ CSS block dissolve
This is a proof of concept to see how far I could go in recreating Suits' opening credits sequence block dissolve with HTML and CSS.
Have a look: poc.nirusu.me/suits/index.html
Of course this is just an effect, not a real block dissolve. Would be interesting to see what can be done with CSS masking or canvas...
Lots of room for improvements here:
- Better image transition timing.
- Safari on desktop and iOS do not apply the gray-filter effect in the keyframe animation unless it is added to every keyframe step.