Javascript css3动画与jqueryappend（）

我想创建如下内容：。因为我对这类事情不是很有经验，所以首先我创建了div，并在页面顶部附加引导警报通知：

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

这没关系，它可以工作-例如，当我单击按钮时，页面顶部会出现不适，并且已修复。 我想设置添加/删除通知的动画，然后扩展我不知道这是否是良好的引导警报类：

.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开发者网络中看到的目标：。我添加了-webkit-prefix，因为一开始我想为我的浏览器Opera24添加它，正如我在中看到的，我必须添加它。 但它不起作用，因为我对非原始CSS非常陌生，我不知道为什么以及如何改进它。如果有人决定帮助我，我会非常高兴的——提前感谢每一个答案

附言。 有意地我不想使用JQuery动画或类似的东西-想法是它应该尽可能独立于外部库，如JQuery或Bootstrap我知道我使用的是Bootstrap类，但它是非常alpha版本：

第2页 console.log中的警报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> 

---

现在我知道了为什么那不起作用了——因为我的愚蠢： 我有CSS代码之间。。。标记，而不是正确的标记-应该是，而不是：

---

现在还有另一个问题——它在显示时会显示动画，但在隐藏时不会显示动画——但现在修复起来要容易得多。现在可以关闭此答案。

动画名称为slideinco是否可以添加警报的HTML？动画持续时间：3s；动画名称：slidein；根据需要使用-webkit。。。但如果您正在为多平台构建任何内容，则应添加-moz。@CayceK我将其更改为slidein，但仍然不起作用。@THiCE我从控制台粘贴到我的日志中

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