css - 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) 使用类“slideInDown”而不是“slideOutDown”2) 用 .container 元素包装 #aviso，位置为:relative3) 给#aviso 绝对位置 margin :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