带有jQuery append（）的CSS 3动画

Question

I want to create something like this: JQuery Growl Nofitications . Because I am not very experienced with things like this, at first I create div that I append Bootstrap Alert notifications at the top of the page:

<div id="notificationDiv" style="position: fixed; width: 90%"></div>

And I append to this div notifications:

var that = this;
var uniqueId = new Number((new Date()).getTime());
this.messages.push({id: uniqueId, 
                    message: this.createMessage(type, uniqueId, direction, size)});

$("#notificationDiv").append( (this.messages[this.messages.length - 1]).message );

$("#" + this.idPreffix + (uniqueId).toString()).click(function(){
     that.messages.splice(this._findByUniqueId($(this).prop("id").split("_")[1]), 1);
     $(this).remove();
});
setTimeout(function(){
    that.messages.splice(
    that._findByUniqueId($("#" + that.idPreffix + 
                                 (uniqueId).toString()).prop("id").split("_")[1]), 1);
     $("#" + that.idPreffix + (uniqueId).toString()).remove();

}, this.timeout);

And that's ok, it works - for example when I click button nofitication appears at the top of the page and is ,,fixed". I want to animate add/remove notification, then I extend (i don't know if that's way is good) Bootstrap's alert class:

.alert{
      -webkit-animation-duration: 3s;
      -webkit-animation-name: slide-in;
      -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes slide-in{
    from{
         margin-left: 100%;
         width: 300%;
    }
    to{
         margin-left: 0%;
         width: 100%
   }
}

To achieve something like I saw in Mozilla Developer Network: Using CSS animations . I add -webkit- prefix because at first I want to do it for my browser, Opera 24 and as I saw in "Can I Use: CSS3 Animation" I have to add it. But it doesn't work, and because I am very new to non-primitive CSS, I have no idea why and how I can improve it. I will be very happy if anybody decides to help me - thank in advance for each answer.

PS Intentionally I don't want to use JQuery animations or things like that - the idea is that it should be as far as I can independent for external libraries like JQuery or Bootstrap (I know that I'm using Bootstrap classes, but it is very-very-very alpha version :) ).

PS 2 Alert HTML from console.log:

<div id='message_1411159143475' class='alert alert-success' 
     style ='float: left; width: 100%;'> 
    Operacja zakończona sukcesem!
    <i style='margin-left: 5px !important' class='glyphicon glyphicon-ok-sign'></i>
</div> 

Answer 1

Now I know why that's no working - because of my stupidity :) I had CSS code between <script type="text/css">...</script> tags, instead correct tag <style type="text/css"></style> - it should be , not :) Now there is another problem - it animates when it shows, but not when it hides - but now it will be much easier to fix. This answer can be closed now.