Fade Background Images with CSS Transitions & JS

A repeating sequence of fullscreen background images, pushed all the way to the root element. Crossfading effect in Webkit-derived browsers (Chrome, Safari, Opera) with standard image substitution in others.

Square to Circle CSS Transition

Chaining CSS Transitions

Demo Image: Chaining CSS Transitions

This is an example of chaining transitions using transition-delay. The key is setting the delay stack on the in transitions, then reversing it on the out transitions. Check the CSS for a mad amount of documentation.

Cool layout with fancy page with CSS transitions

Desktop only. Fullscreen please. Site, where i saw the original concept, uses canvas for page transitions :D And because i'm a newbie with canvas, i made more simplistic (in terms of animation, not code) copy with margin transitions (transform not working with background-attachment: fixed, which is needed for separated blocks with background-size: cover). Tested in latest Chrome/FF/IE, everywhere works ok.

Button hover animation with CSS Transition

Burger Menu Transitions Gallery

Demo Image: Burger Menu Transitions Gallery

CSS transitions only and super simple. Simple burger menus that don't move are boring. As a user, I want to engage with a site and discover new things. This is the main reason I came up with a couple of simple CSS transitions to make the whole process more fun. Click away!

Full Screen Video with Parallax Scrolling

This is a responsive layout that features a full screen "hero" video with a hardware accelerated parallax scrolling effect. You can play/pause the video at any time, set different scroll rates to as many elements as you like as well as add additional CSS transitions using jQuery.

CSS-only Notifications Component

This is a Sass mixin that provides notifications functionality using little-to-none Javascript. It makes use of CSS transitions and animations to display notifications as popups or bars on different locations of the viewport. The best thing is that it is fully customizable and easy to use. :)