Suits’ CSS block dissolve

suits

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: http://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:

  • random blocks creation with Javascript.
  • Start animation after music has loaded and starts playing (Javascript)
  • Better image transition timing.

Discovered issues:

  • Safari on desktop and iOS do not apply the gray-filter effect in the keyframe animation unless it is added to every keyframe step.