CSS3 with jQuery / Reverse Animation

Hello guys, this time I wanted to bump into another interesting experiment, create a reverse animation. I helped with jQuery to assign the specific class at the click of the button. In my opinion an interesting experiment, I hope you will like and find alternative paths in the realization of the same experiment with different techniques.

I remember this animations are only visible in Firefox, Safari and Chrome.

Let’s start!

The Markup

HTML

The markup is not difficult, we used two unordered lists, the first list follow insert all graphics (via CSS3) and animations, while the second list social will have links to social networks always with a nice animation.

As you will see the first list is composed of lines, points and special effect, the latter two are accompanied by an control layer to adjust the delay of the animation.
While in the second list, they are also accompanied by a control layer that control the animation and delay, and a specific class that as you will see later, to determine the exact position.

<div class="ID-Image">  
  <ul id="follow">  
     <li class="line1">  
     <span id="layerBall" class="ball">LINKED IN</span><span id="layerPulse" class="pulse"></span>  
     </li>  
       
     <li class="line2">  
     <span id="layerBall1" class="ball1">FOORST</span><span id="layerPulse1" class="pulse1"></span>  
     </li>  
          
     <li class="line3">  
     <span id="layerBall2" class="ball2">TWITTER</span><span id="layerPulse2" class="pulse2"></span>  
     </li>  
          
     <li class="line4">  
     <span id="layerBall3" class="ball3">FACEBOOK</span><span id="layerPulse3" class="pulse3"></span>  
     </li>  
   </ul>  
     
   <ul id="social">  
   <li id="layerSocialControl3" class="facebook"><a href="#">Facebook</a></li>  
   <li id="layerSocialControl2" class="twitter"><a href="#">Twitter</a></li>  
   <li id="layerSocialControl" class="linked"><a href="#">Linked In</a></li>  
   <li id="layerSocialControl1" class="forrst"><a href="#">Forrst</a></li>  
   </ul>  
     
 </div>  
<a id="trigger" href="#">Follow Me!</a>

CSS

This first part of the CSS will make you understand how all the elements are positioned in the scene, and how to apply the animations.
Take care some classes are accompanied by a .running, it will serve with the help of jQuery to determine the start animation to the button click.

/* CONTAINER IMAGE */
.ID-Image {
    width: 300px;
    height: 300px;
    background: url(photoID.png) no-repeat;
    margin: 150px auto 0;
}

/* LINE FOLLOW */
#follow {
    list-style: none;
    position: relative;
    top: 140px;
    left: 140px;
    z-index: -1;
}

.running .line1,.running .line2,.running .line3,.running .line4 {
    background: #2187e7;
    width: 0px;
    height: 1px;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

.running .line1 {
    -moz-transform: rotate(17deg);
    -webkit-transform: rotate(17deg);
    -moz-animation: move  0.65s linear forwards;
    -webkit-animation: move  0.65s linear forwards;
}

.running .line2 {
    -moz-transform: rotate(140deg);
    -webkit-transform: rotate(140deg);
    -moz-animation: move1 0.75s linear forwards;
    -webkit-animation: move1  0.75s linear forwards;
}

.running .line3 {
    -moz-transform: rotate(235deg);
    -webkit-transform: rotate(235deg);
    -moz-animation: move2 0.9s linear forwards;
    -webkit-animation: move2  0.9s linear forwards;
}

.running .line4 {
    -moz-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    -moz-animation: move3 0.5s linear forwards;
    -webkit-animation: move3  0.5s linear forwards;
}


/* POINTER */
.running .ball, .running .ball1, .running .ball2, .running .ball3 {
    background-color: #2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    width: 7px;
    height: 7px;
    border-radius: 50px;
    position: absolute;
    z-index: 99;
    -moz-transform: scale(0);
    -moz-animation: point 0.1s linear forwards;
    -webkit-transform: scale(0);
    -webkit-animation: point 0.1s linear forwards;
}

/* SPECIAL FX*/
.running .pulse, .running .pulse1, .running .pulse2, .running .pulse3 {
    width: 12px;
    height: 12px;
    border-radius: 30px;
    border: 1px solid #00c6ff;
    box-shadow: 0 0 5px #00c6ff;
    position: absolute;
    -moz-transform: scale(0);
    -moz-animation: pulse 0.6s ease-out;
    -webkit-transform: scale(0);
    -webkit-animation: pulse 0.6s ease-out;
}


/* COORDINATE POINTS BALL + SPECIAL FX */
span {
    position: absolute;
    text-indent: -9999px;
}

.ball {
    left: 295px;
    top: -3px;
}

.ball1 {
    left: 355px;
    top: -3px;
}

.ball2 {
    left: 200px;
    top: -3px;
}

.ball3 {
    left: 365px;
    top: -3px;
}

.pulse {
    left: 293px;
    top: -5px;
}

.pulse1 {
    left: 354px;
    top: -5px;
}

.pulse2 {
    left: 198px;
    top: -5px;
}

.pulse3 {
    left: 363px;
    top: -5px;
}


/* DELAY CONTROL LAYER */
#layerBall, #layerPulse {
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}

#layerBall1, #layerPulse1 {
    -moz-animation-delay: 0.7s;
    -webkit-animation-delay: 0.7s;
}

#layerBall2, #layerPulse2 {
    -moz-animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

#layerBall3, #layerPulse3 {
    -moz-animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}

/* FOLLOW ME LIST */
ul#social {
    list-style: none;
}

ul#social li {
    position: relative;
    background: #000000;
    background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
    background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    width: 70px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.8em;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    width: 70px;
    opacity: 0;
}

ul#social li:hover {
    background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
    background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
    cursor: pointer;
}

ul#social a:hover {
    color: #fff;
}

.running #layerSocialControl {
    -moz-animation: tooltip 0.35s 0.55s linear forwards;
    -webkit-animation: tooltip 0.35s 0.55s linear forwards;
}

.running #layerSocialControl1 {
    -moz-animation: tooltip 0.35s 0.65s linear forwards;
    -webkit-animation: tooltip 0.35s 0.65s linear forwards;
}

.running #layerSocialControl2 {
    -moz-animation: tooltip 0.35s 0.8s linear forwards;
    -webkit-animation: tooltip 0.35s 0.8s linear forwards;
}

.running #layerSocialControl3 {
    -moz-animation: tooltip 0.35s 0.4s linear forwards;
    -webkit-animation: tooltip 0.35s 0.4s linear forwards;
}

#social .facebook {
    top: -150px;
    left: 406px;
}

#social .twitter {
    top: -83px;
    left: 28px;
}

#social .linked {
    top: 178px;
    left: 432px;
}

#social .forrst {
    top: 297px;
    left: -130px;
}

CSS – Normal Animation

Here are the various animations of the class .running, nothing special at the end, are simple animations that can be achieved thanks to CSS3.

/* ANIMATION LINE */
@-moz-keyframes move {
    0%   { width: 0px;
}

100% {
    width: 300px;
    box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
}
}

@-moz-keyframes move1 {
    0% {
        width: 0px;
    }

    100% {
        width: 360px;
        box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    };
}

@-moz-keyframes move2 {
    0% {
        width: 0px;
    }

    100% {
        width: 205px;
        box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    };
}

@-moz-keyframes move3 {
    0% {
        width: 0px;
    }

    100% {
        width: 370px;
        box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    };
}

@-webkit-keyframes move {
    0% {
        width: 0px;
    }

    100% {
        width: 300px;
        box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    };
}

@-webkit-keyframes move1 {
    0% {
        width: 0px;
    }

    100% {
        width: 360px;
        box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    };
}

@-webkit-keyframes move2 {
    0% {
        width: 0px;
    }

    100% {
        width: 205px;
        box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    };
}

@-webkit-keyframes move3 {
    0% {
        width: 0px;
    }

    100% {
        width: 370px;
        box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    };
}

/* ANIMATION BALL + SPECIAL FX */
@-moz-keyframes point {
    0%  {-moz-transform: scale(0,0);
}

100% {
    -moz-transform: scale(1,1);
}	
}

@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(0);
        opacity: 0;
    }

    10% {
        -moz-transform: scale(1);
        opacity: 0.5;
    }

    50% {
        -moz-transform: scale(1.75);
        opacity: 0;
    }

    100% {
        -moz-transform: scale(0);
        opacity: 0;
    };
}

@-webkit-keyframes point {
    0% {
        -webkit-transform: scale(0,0);
    }

    100% {
        -webkit-transform: scale(1,1);
    };
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    10% {
        -webkit-transform: scale(1);
        opacity: 0.5;
    }

    50% {
        -webkit-transform: scale(1.75);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(0);
        opacity: 0;
    };
} 

/* ANIMATION LABEL */
@-moz-keyframes tooltip {
    0%  { -moz-transform: scale(0,0);
    opacity: 0;
}

50% {
    -moz-transform: scale(1.2,1.2);
    opacity: 0.3;
}

75% {
    -moz-transform: scale(0.9,0.9);
    opacity: 0.7;
}

100% {
    -moz-transform: scale(1,1);
    opacity: 1;
}
}

@-webkit-keyframes tooltip {
    0% {
        -webkit-transform: scale(0,0);
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(1.2,1.2);
        opacity: 0.3;
    }

    75% {
        -webkit-transform: scale(0.9,0.9);
        opacity: 0.7;
    }

    100% {
        -webkit-transform: scale(1,1);
        opacity: 1;
    };
}

CSS – Reverse Animation

Here is the heart of the experiment. As you have seen before some classes were accompanied by a class “.running”, but now these classes are accompanied by the class “.reverse“.

To function you must copy the properties that were active at the end of the animation “.running” to recreate the animation inverse reversing the parameters. This class will be activated when the button on the tap again. Us remember especially to reset the delay of the animation control layer.

/* REVERSE LINE PROPERTIES */
.reverse .line1,.reverse .line2,.reverse .line3,.reverse .line4 {
    background: #2187e7;
    width: 0px;
    height: 1px;
    box-shadow: 0px 0px 5px 1px rgba(0,198,255,0.5);
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

.reverse .line1 {
    -moz-transform: rotate(17deg);
    -webkit-transform: rotate(17deg);
    -moz-animation: moveReverse  0.65s linear forwards;
    -webkit-animation: moveReverse  0.65s linear forwards;
}

.reverse .line2 {
    -moz-transform: rotate(140deg);
    -webkit-transform: rotate(140deg);
    -moz-animation: move1Reverse 0.75s linear forwards;
    -webkit-animation: move1Reverse  0.75s linear forwards;
}

.reverse .line3 {
    -moz-transform: rotate(235deg);
    -webkit-transform: rotate(235deg);
    -moz-animation: move2Reverse 0.9s linear forwards;
    -webkit-animation: move2Reverse  0.9s linear forwards;
}

.reverse .line4 {
    -moz-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    -moz-animation: move3Reverse 0.5s linear forwards;
    -webkit-animation: move3Reverse  0.5s linear forwards;
}

/* REVERSE POINT PROPERTIES */
.reverse .ball, .reverse .ball1, .reverse .ball2, .reverse .ball3 {
    background-color: #2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    width: 7px;
    height: 7px;
    border-radius: 50px;
    position: absolute;
    z-index: 99;
    -moz-transform: scale(1);
    -moz-animation: pointReverse 0.1s linear forwards;
    -webkit-transform: scale(1);
    -webkit-animation: pointReverse 0.1s linear forwards;
}

/* DELAY CONTROL REVERSE */
.reverse #layerBall, .reverse #layerBall1, .reverse #layerBall2, .reverse #layerBall3 {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

/* REVERSE LABEL PROPERTIES */
.reverse ul#social li {
    position: relative;
    background: #000000;
    background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
    background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    width: 70px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.8em;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    width: 70px;
    opacity: 1;
}

.reverse #layerSocialControl {
    -moz-animation: tooltipReverse 0.35s linear forwards;
    -webkit-animation: tooltipReverse 0.35s linear forwards;
}

.reverse #layerSocialControl1 {
    -moz-animation: tooltipReverse 0.35s linear forwards;
    -webkit-animation: tooltipReverse 0.35s linear forwards;
}

.reverse #layerSocialControl2 {
    -moz-animation: tooltipReverse 0.35s linear forwards;
    -webkit-animation: tooltipReverse 0.35s linear forwards;
}

.reverse #layerSocialControl3 {
    -moz-animation: tooltipReverse 0.35s linear forwards;
    -webkit-animation: tooltipReverse 0.35s linear forwards;
}

/* ANIMATION LINE REVERSE */
@-moz-keyframes moveReverse {
    0%   { width: 300px;
}

100% {
    width: 0px;
    box-shadow: none;
}
}

@-moz-keyframes move1Reverse {
    0% {
        width: 360px;
    }

    100% {
        width: 0px;
        box-shadow: none;
    };
}

@-moz-keyframes move2Reverse {
    0% {
        width: 205px;
    }

    100% {
        width: 0px;
        box-shadow: none;
    };
}

@-moz-keyframes move3Reverse {
    0% {
        width: 370px;
    }

    100% {
        width: 0px;
        box-shadow: none;
    };
}

@-webkit-keyframes moveReverse {
    0% {
        width: 300px;
    }

    100% {
        width: 0px;
        box-shadow: none;
    };
}

@-webkit-keyframes move1Reverse {
    0% {
        width: 360px;
    }

    100% {
        width: 0px;
        box-shadow: none;
    };
}

@-webkit-keyframes move2Reverse {
    0% {
        width: 205px;
    }

    100% {
        width: 0px;
        box-shadow: none;
    };
}

@-webkit-keyframes move3Reverse {
    0% {
        width: 370px;
    }

    100% {
        width: 0px;
        box-shadow: none;
    };
}

/* ANIMATION POINTS REVERSE */
@-moz-keyframes pointReverse {
    0%  {-moz-transform: scale(1,1);
}

100% {
    -moz-transform: scale(0,0);
}	
}

@-webkit-keyframes pointReverse {
    0% {
        -webkit-transform: scale(1,1);
    }

    100% {
        -webkit-transform: scale(0,0);
    };
}

/* ANIMATION LABEL REVERSE */
@-moz-keyframes tooltipReverse {
    0%  { -moz-transform: scale(1,1);
    opacity: 1;
}

50% {
    -moz-transform: scale(0.9,0.9);
    opacity: 0.7;
}

75% {
    -moz-transform: scale(1.2,1.2);
    opacity: 0.3;
}

100% {
    -moz-transform: scale(0,0);
    opacity: 0;
}
}

@-webkit-keyframes tooltipReverse {
    0% {
        -webkit-transform: scale(1,1);
        opacity: 1;
    }

    50% {
        -webkit-transform: scale(0.9,0.9);
        opacity: 0.7;
    }

    75% {
        -webkit-transform: scale(1.2,1.2);
        opacity: 0.3;
    }

    100% {
        -webkit-transform: scale(0,0);
        opacity: 0;
    };
}

jQuery

The first step is to call the jQuery file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Create a new script tag and insert the code. As you can see this is a very simple script, you just need to change the text dynamically using .live method and remove the class .reverse and activate the class .running and back again.

$(document).ready(function() {
var content = $('.content');

$('#trigger').live('click', function() {
    $(this).toggle(function() {
        $(this).text('hide follow!');
        content.removeClass('reverse').addClass('running');
    }, function() {
         $(this).text('follow me!');
        content.removeClass('running').addClass('reverse');
    }).trigger('click');
});
});

Conclusion

I hope that this experiment could help discover new ways to reach the same effect. If you find new tips or possible additions please comment.

October 12, 2011