Category Archives: Sass

A design pattern for making interesting CSS animations in under 10 minutes

“the way is long if one follows precepts, but short and helpful, if one follows patterns” ― Lucius Annaeus Seneca

I’ve had a lot of fun making a certain style of CSS animation demos on CodePen lately, all of which seem to follow a similar design pattern. Below are a couple of examples (embedded here as .gifs, but click through to see the live HTML/CSS versions): Continue reading A design pattern for making interesting CSS animations in under 10 minutes

Random fly-in animation using Sass

“It’s a cruel and random world, but the chaos is all so beautiful.”
― Hiromu Arakawa

One of the things that’s changed in the CSS world over the past several years is the rise of CSS preprocessors, and Sass is one of the most popular (LESS is another big one, if you’re interested here’s a comparison between the two from Smashing Magazine; here’s another comparison from CSS Tricks).  I hadn’t explored either much until recently, as useful as they are they have to fit into your workflow, and I just haven’t had the opportunity to use either in the context of my day job, but coding playground Codepen makes it super-easy to try out Sass (LESS too, if that’s more your thing).
Continue reading Random fly-in animation using Sass