Animated Transition Effects
May 11, 2016 | 19 Feedbacks

Animated Transition Effects

A library of animated transition effects, powered by CSS Animations.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

A few weeks ago we published a tutorial about how to create an Ink Transition effect using a PNG sprite and the steps() CSS timing function. That resource has since become one of the most popular here on CodyHouse, therefore we decided to team up with talented motion designer Gabriele Mellera to create a small library of transition effects!

If you want to learn how to create your own transition effects, here is our thorough tutorial:

Ink Transition Effect Tutorial

How to use the transition effects

We created a separate html file for each effect. Note the class applied to the <body>, that we used in CSS to target the specific effect.

The CSS file is organized in different sections. For a transition to work properly you need to include the style shared by all effects, the custom effect style, and the keyframes to control the animation.

If you want to change the color of the transitions, all you need to do is importing the PNG image sprites into a graphic tool, and change the color of the filled area. For example, in Photoshop you can use layer styles to apply a color overlay. Once you’ve edited the image, simply save it as PNG. If you’re concerned about the size, TinyPNG is a great tool to compress PNG images.

Change image color


May 11, 2016
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • Timur

    Sebastiano, it’s simply genius, to say the least! Thank you for sharing this!

  • Kevin Robert

    Can this be applied to a WordPress site

  • Boba Fett

    Sebastiano: This works great. If I can make it work any one can. You know I get hungry when you guys don’t post at your regular interval of 2 wks.

    • Boba Fett

      I tried to insert images, but didn’t work….:(

    • Boba Fett

      I figured it out! Congratulations to me!!!

  • MadeInMoon


  • Guyom


  • Domenico Venturin

    Really amazing!

  • Chris Three

    Hi, Can you provide a working demo that loads a new HTML instead of a modal layer?

    • Adam

      If u want it to load a new html You need to edit: js/main.js.

      Delete code:

      Insert there instead: location.href = “”;

      Now when You click on the button the animation will play and then it will load your next html page.

  • Wojtek MTA

    Great !!!

  • Leo Zeron


  • Muthupandian L

    Hi, i need load more than a page. How i may insert the pages? Without modal popup.

  • Muhammad Nur Fuad (FD)


  • Ivailo Aleksandrov

    Hey Can I pop expanding image instead of background color, otherwise it’s amazing

  • Osvaldo Matos Matos

    Plis Can this be applied to a WordPress site ? As I can apply?

  • Anurag Nigam

    Hey Sebastiano, I just loved your approach on this..! Thanks for sharing this. Cheers :)

  • Boba Fett

    Hi Sebastiano: Is there a way to fire different effect modal windows with different content from the same page? For example, how may I fire ‘Clone’ with content 1 and ‘Cartoon’ with content 2? I would be happy even if I can fire same effect type with different modal content.

  • Николай Аврамов

    Hi Sebastiano! It’s the best transition of all that I see! There is a problem. How to make window content is loaded when you open and cleared at closing?
    P.S: Bad speak English, use google translate :)