div 集中式 animate.css

Question

好吗？

我在集中化方面遇到了一些问题 DIV 我是为了生成警告，我注意到我使用的动画是问题所在，但不知道如何解决这个问题。

html, body{
  background-color: #DDD;
}
#aviso {
 text-align: center;
 cursor: pointer;
 margin: 0 auto;
  -webkit-border-radius: 10px; 
 -moz-border-radius: 10px;
 border-radius: 10px;
 background-color: black;
 padding: 20px;
 position: fixed;
 opacity: 0.95;
 -moz-opacity: 0.90;
 filter: alpha(opacity=90);
 top: 20%;
 left: 50%;
 transform: translate(-50%, 0);
 z-index: 999;
 display: block; 
  -vendor-animation-duration: 6s;
  -vendor-animation-delay: 6s;
  -vendor-animation-iteration-count: infinite;
}
#aviso p{
    color: white;
}
#aviso i{
    font-size: 70px;
    color: white;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//daneden.github.io/animate.css/animate.min.css">

<div id="aviso" class="animated slideOutDown" onclick="">
    <p><i class="fa fa-exclamation-triangle"></i></p>
    <p>Campos obrigatórios não foram preenchidos</p>
</div>

http://codepen.io/KaeDesign/pen/GJNPZW

有人可以帮帮我吗？请注意，如果没有 Animate.css，它通常居中。

谢谢

Answer 1

我猜你想让通知向下滑动然后保持在右边？如果是这种情况，请执行以下操作：

1) 使用 class "slideInDown" 而不是 "slideOutDown" 2) 用 .container 元素包装 #aviso，位置为：relative 3) 给#aviso 绝对位置保证金：10% auto； 4) Nix动画相关css

所以 html 看起来像：

<div class="container" style="position:absolute">
    <div id="#aviso">some stuff</div>
</div>

元素#aviso 看起来像：

#aviso {
  text-align: center;
  cursor: pointer;
  margin: 10% auto;
  width: 400px;
  -webkit-border-radius: 10px; 
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-color: black;
  padding: 20px;
  position: relative;
  opacity: 0.95;
  -moz-opacity: 0.90;
  filter: alpha(opacity=90);
  transform: translate(-50%, 0);
  z-index: 999;
  display: block;
}

工作示例：http://codepen.io/JordanLittell/pen/KpNbyr

div 集中式 animate.css

div centralized animate.css

css

animation

animate.css