Animation Glitches On Website

I made a small scale experiment where I was testing an animation that would happen when you repeatedly hit the yellow square, in the jsfiddle below: http://jsfiddle.net/aritro33/v8

Solution 1:

I've cleaned this up A LOT, the code should be much easier to read and follow now:

HTML

<script id="empty-message" type="html/template">
    <div class="message new box animated bounceInDown">
        <div class="thecolor"></div>
        <div class="bubble">
            <input type="text" class="hexcolor" value="#2AC0A3" />
        </div>
        <div class="composeheader">
            <input type="text" value="Write Header Here:" />
        </div>
        <div class="body">
            <span contenteditable="true">Write context text here:</span>
        </div>
    </div>    
</script>

<div id="message-actions">
    <span class="compose">Compose</span>
    <span class="post">Post</span>
</div>
<div id="no-posts">- No Posts Yet -</div>
<div id="all-posts"></div>

JavaScript

var getRGB = function(color) {
        var rgb = color.replace('#', '');       
        rgb = rgb.length === 3 ? rgb[0] + rgb[0] + rgb[1] + rgb[1] + rgb[2] + rgb[2] : rgb;

        var conv = rgb.match(/.{2}/g);
        var r = parseInt(conv[0], 16) + 156;
        var g = parseInt(conv[1], 16); + 46;
        var b = parseInt(conv[2], 16); + 67;

        rgb = r + ',' + g + ',' + b;
        rgb = rgb.replace(/NaN/g, ' ... ');
        rgb = ('rgb(' + rgb + ')');
        return rgb;
};

$(document).ready(function() {

    $('#all-posts').on('keyup', '.message.new .hexcolor', function () {
        var color = $(this).val();
        $(".message.new .thecolor, .message.new .composeheader").css("background-color", color);    
        $(".message.new .body").css("background-color", getRGB(color));
    });

    $('#message-actions').click(function () {

        if ($('.compose').is(':visible')) { 
            $('#all-posts').prepend($('#empty-message').html());
        } else {       
            var $message = $('#all-posts .message:first').removeClass('new box animated bounceInDown');
            $message.find('.composeheader > input').attr('readonly', true);
            $message.find('.body > span').attr('contenteditable', false);
        }

        $('#no-posts').hide();
        $('.compose, .post').toggle();

    });

});

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:100);

/* css for animation */

.animated {
     -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
     -ms-animation-duration: 1s;
     -o-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
     -ms-animation-fill-mode: both;
     -o-animation-fill-mode: both;
     animation-fill-mode: both;
 }
 .animated.hinge {
     -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
     -ms-animation-duration: 2s;
     -o-animation-duration: 2s;
     animation-duration: 2s;
 }
 @-webkit-keyframes bounceInDown {
     0% {
         -webkit-transform: translateY(-2000px);
     }
     60% {
         -webkit-transform: translateY(30px);
     }
     80% {
         -webkit-transform: translateY(-10px)
     }
     100% {
         -webkit-transform: translateY()
     }
 }
 @-moz-keyframes bounceInDown {
     0% {
         -moz-transform: translateY(-2000px);
     }
     60% {
         -moz-transform: translateY(30px);
     }
     80% {
         -moz-transform: translateY(-10px)
     }
     100% {
         -moz-transform: translateY()
     }
 }
 @-ms-keyframes bounceInDown {
     0% {
         -ms-transform: translateY(-2000px);
     }
     60% {
         -ms-transform: translateY(30px);
     }
     80% {
         -ms-transform: translateY(-10px)
     }
     100% {
         -ms-transform: translateY()
     }
 }
 @-o-keyframes bounceInDown {
     0% {
         -o-transform: translateY(-2000px);
     }
     60% {
         -o-transform: translateY(30px);
     }
     80% {
         -o-transform: translateY(-10px)
     }
     100% {
         -o-transform: translateY()
     }
 }
 @keyframes bounceInDown {
     0% {
         transform: translateY(-2000px);
     }
     60% {
         transform: translateY(30px);
     }
     80% {
         transform: translateY(-10px)
     }
     100% {
         transform: translateY()
     }
 }
 .bounceInDown {
     -webkit-animation-name: bounceInDown;
     -moz-animation-name: bounceInDown;
     -ms-animation-name: bounceInDown;
     -o-animation-name: bounceInDown;
     animation-name: bounceInDown;
 }
 @-webkit-keyframes bounceInUp {
     0% {
         -webkit-transform: translateY(2000px);
     }
     60% {
         -webkit-transform: translateY(-30px);
     }
     80% {
         -webkit-transform: translateY(10px)
     }
     100% {
         -webkit-transform: translateY()
     }
 }
 @-moz-keyframes bounceInUp {
     0% {
         -moz-transform: translateY(2000px);
     }
     60% {
         -moz-transform: translateY(-30px);
     }
     80% {
         -moz-transform: translateY(10px)
     }
     100% {
         -moz-transform: translateY()
     }
 }
 @-ms-keyframes bounceInUp {
     0% {
         -ms-transform: translateY(2000px);
     }
     60% {
         -ms-transform: translateY(-30px);
     }
     80% {
         -ms-transform: translateY(10px)
     }
     100% {
         -ms-transform: translateY()
     }
 }
 @-o-keyframes bounceInUp {
     0% {
         -o-transform: translateY(2000px);
     }
     60% {
         -o-transform: translateY(-30px);
     }
     80% {
         -o-transform: translateY(10px)
     }
     100% {
         -o-transform: translateY()
     }
 }
 @keyframes bounceInUp {
     0% {
         transform: translateY(2000px);
     }
     60% {
         transform: translateY(-30px);
     }
     80% {
         transform: translateY(10px)
     }
     100% {
         transform: translateY()
     }
 }
 .bounceInUp {
     -webkit-animation-name: bounceInUp;
     -moz-animation-name: bounceInUp;
     -ms-animation-name: bounceInUp;
     -o-animation-name: bounceInUp;
     animation-name: bounceInUp;
 }


 /* page */

 body {
     background-color: #2D3E50;
     font-family:'Roboto';
     min-width: 960px;
 }


 /* message compose */

 .message { 
    margin-top: 40px;
}

 .composeheader {
     background-color:#2AC0A3;
     color: white;
     padding: 10px 15px;
     clear: both;
 }

 .composeheader INPUT {
     color: white;
     font-size: 40px;
     background-color: transparent;
     border-width: 0;
     font-family: 'Roboto';
 }

 .body {
     min-height: 80px;
     overflow: hidden;
     padding: 20px;
     background-color: #C6EEE6;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;
}

.body > span {
     color: black;     
     outline: 0px solid transparent;
}

.thecolor {
     height: 50px;
     width: 50px;
     background-color: #2AC0A3;
     border-radius: 100px;
     float: left;
     margin-bottom: 10px;
}

.bubble { display: none; }

 .message.new .bubble {
     height: 50px;
     padding: 0px;
     background: #FFFFFF;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
     float: left;
     margin-left: 20px;
     display: block;
 }

 .bubble:after {
     content:'';
     position: absolute;
     border-style: solid;
     border-width: 10px 15px 10px 0;
     border-color: transparent #FFFFFF;
     display: block;
     width: 0;
     z-index: 1;
     left: 55px;
     top: 15px;
 }

 .hexcolor {     
     font-size: 20px;
     height: 30px;
     width: 100px;
     background-color: transparent;
     border-width: 0px;
     margin: 10px 5px
 }

 /* compose button */

 #message-actions {
     height: 215px;
     width: 215px;
     background-color: #EBF1F1;
     border-radius: 150px;
     position: relative;
     color: #2c3e50;
     -webkit-transition: all 0.15s linear;
     -moz-transition: all 0.15s linear;
     transition: all 0.15s linear;
     float: left;
     margin: 40px 100px 10px;
 }

 #message-actions:hover {
     background-color: #219B86;
     color: #EBF1F1;
 }

 #no-posts {
     color: white;
     font-size: 39px;     
     float: left;
     margin-top: 120px;
 }

 .compose {
     font-size: 39px;     
     position: relative;
     left: 22px;
     top: 75px;
 }

 .post {
     color: #2c3e50;     
     font-size: 39px;
     position: relative;
     left: 70px;
     top: 75px;
     display: none;
}

/* messages */

#all-posts {
    min-height: 140px;
    width: 500px;
    float: left;
}

jsFiddle Demo

Use meaningful names for your ids and css classes, it makes the code much easier to follow and understand what is going on. Styles such as "firstspan" mean nothing and means you have to keep looking back at the markup to figure out context.

I've cleaned this up as best I can, I'm not good with CSS3 or the animation stuff, I'll leave it to you to fix that up. I think this should be working exactly as you expect now, messages slide down and are added to the stack top down.

EDIT 2: I changed a lot of the ID selectors to use and refactored the code to make it much simpler. You were also setting the ID on the newly created elements which were all the same, this is wrong and will cause you issues further down the line (ID's should be unique per page). I cleaned up the JS, combining multiple statements which did the same thing with different selectors. You were using a lot of standard JavaScript getElementById type calls, I changed these create the DOM elements using jQuery instead.

I used an html/template script declaration to create the new elements, it's much cleaner than using jQuery to built up your new DOM elements. Also, your compose and post elements were essentially the same thing. Don't repeat CSS styles, either combine multiple selectors, or just re-use the same structure as I have done. Hopefully the changes make sense.