Slidedown transition with margin/padding

I’ve been playing with a possible alternative approach to slide down transitions using CSS3 only, by animating the margin (or padding). The opacity eases in as well to make it a little softer.

What do you think?

Where does your eye focus?

See the Pen Slide down margin transition by Ben Boyle (@bboyle) on CodePen.

Advertisement

Published by

Ben Boyle

Web developer, Dad, gamer, mentor, animator, universal design advocate, fan of gadgets and sunshine!

2 thoughts on “Slidedown transition with margin/padding”

  1. The jQuery slide down is jarring and runs a lot slower for me (Chrome, Win8). The CSS3 transition is much smoother. As to the focal point, it feels like the CSS3 version is expanded down from within where you click on the checkbox. The jQuery one has an odd delay of it starting to slide down, then sliding down even further towards the end (giving the illusion of it actually sliding up a touch, then down)

    1. Yes, the jquery doesn’t seem quite right in the example. I wonder if something in my CSS is skewing it, it usually performs better.

      Curiously my wife really doesn’t like my CSS version. She perfers the slide down transition. Says the movement on the margin slide makes it feel weird. Animating opacity helped. I wonder if I could animate a transform, maybe a scale-y to do a slide down. Hmmm.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s