Posts tagged animations

I’ve been playing around with new animations for fullscreen navigation menus and thought I’d share. The Pen below is a sort of window blind/disappearing curtain swipe transition.

In case anyone is interested in the code behind the images and animations on my new theme, I put it all in a new Pen on CodePen to make it easier to explore.

Just finished up a quick Pen to try out some diagonal swipe/background hover animations using transform: skew.

I have an example page here and you can check out the code below. All of the background images are courtesy of Unsplash It.

It’s the holiday season so here’s a quick Pen featuring a trio of Christmas tags. Each tag has a festive little design around the edges and flips over on hover.

A lot of Destiny playing has been going on in my apartment lately and after weeks of seeing it whenever I glanced up at the TV screen, I was inspired to work on a few geometric animations.

You can view the results here.

The code is embedded below or you can get it directly at CodePen.

These are both pretty cool:

How To Create CSS Glitch Effect (ihatetomatoes.net)

CSS Animated Neon Text (freefrontend.com)

An update on a quick post I wrote a while back about some social sharing buttons I was working on. I just cleaned up that pen a bit — created examples for each sharing service, prefixed the CSS, added a new animation option — so a demo page to show them off seemed in order.

The demo page is here and the code is here.

I should also mention that the social icons all come from Font Awesome and the background were much easier thanks to this post.

Just for fun, playing around with CSS3 animations.