带有jQuery append（）的CSS 3动画

Question

我想创建这样的东西： JQuery Growl Nofitications 。 因为我对这样的事情不太熟悉，所以首先创建div，然后在页面顶部附加Bootstrap Alert通知：

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

我在此div通知后追加：

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);

没关系，它可以正常工作-例如，当我单击按钮时，nofitication出现在页面顶部，并且固定为“。我想为添加/删除通知设置动画，然后扩展（我不知道这是良好）的Bootstrap警报类：

.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%
   }
}

要实现我在Mozilla开发人员网络中看到的功能： 使用CSS动画 。 我添加-webkit-前缀是因为起初我想在我的浏览器Opera 24中使用它，并且正如我在“我可以使用：CSS3动画”中看到的那样，我必须添加它。 但这是行不通的，并且因为我对非原始CSS还是很陌生，所以我不知道为什么以及如何改进它。 如果有人决定帮助我，我将非常高兴-预先感谢每个答案。

PS有意地我不想使用JQuery动画或类似的东西-想法是它应该尽可能地独立于JQuery或Bootstrap之类的外部库（我知道我正在使用Bootstrap类，但是它是非常非常alpha版本:)）。

来自console.log的PS 2 Alert HTML：

<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

现在，我知道为什么它不起作用-由于我的愚蠢:)我在<script type="text/css">...</script>标记之间插入了CSS代码，而是正确的标记<style type="text/css"></style> -应该是，而不是:)现在还有另一个问题-它在显示时动画，但在隐藏时不动画-但现在更容易修复。 该答案现在可以关闭。