See the Pen Drop I by Chris Lowe (@alltimelowe) on CodePen.


I is for Inception. Reusing Monoton from CSS Drop Cap – E, taking inspiration from Christopher Nolan’s 2010 film Inception.

Trying to push animations a bit further, I am stacking transforms inside the keyframe and staggering the animations of the before and after pseudo-elements on the animation declaration in the css. This effect is a combination of altering opacity, scale (not uniform), skew and rotate. I suspect this many transforms may be a bit heavy for performance, but it seems to run fine for me.