Animated Transition Effects

Animated Transition Effects

A library of animated transition effects, powered by CSS Animations.

Nucleo icons

Sponsored by Nucleo, a free application to collect, customize and export all your icons as icon font and SVG symbols. Made by the CodyHouse folks!

All the resources available on CodyHouse are released under the MIT license. You can support our project with a Paypal donation 🙌

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.

<!doctype html>
<html lang="en" class="no-js">
      <!-- ... -->
      <title>Cartoon Transition Effect | CodyHouse</title>
   <body class="cartoon-transition">
      <main class="cd-main-content">
         <!-- ... -->

      <div class="cd-modal" id="modal-1">
         <!-- ... -->

      <div class="cd-transition-layer" data-frame="25"> 
         <div class="bg-layer"></div>

      <script src=""></script>
         if( !window.jQuery ) document.write('<script src="js/jquery-2.2.1-min.js"><\/script>');
      <script src="js/main.js"></script> <!-- Resource jQuery -->

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.

/* -------------------------------- 

Shared style

-------------------------------- */

.cd-btn {
  display: inline-block;
  padding: 1.6em 2.4em;
  font-size: 1.4rem;
  letter-spacing: .15em;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: box-shadow .3s;

/* -------------------------------- 

Scrub Effect - Custom effect style

-------------------------------- */

.scrub-transition {
  font-family: "PT Sans", sans-serif;
  color: #2c1a32;

/* -------------------------------- 

Animations - remember to check the animation name to copy the correct keyframes

-------------------------------- */

@keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    transform: translateY(-50%) translateX(-2%);
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    transform: translateY(-50%) translateX(-98%);

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

Join our newsletter

Get our monthly recap with the latest CodyHouse news

We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.