我正在创建一个css动画，我想把它放入bootstrap网格系统。动画中的元素已设置为position：absolute，这使得我的文本在移动时分解动画。如何解决这个问题，以便文本在发生故障时进入动画？
这是我的代码的链接： http://codepen.io/aahmed2/pen/NRaPAo
<div class="container">
<div class="col-sm-4">
<div class="animation">
<div id="human">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="101.223px" height="101.221px" viewBox="0 0 101.223 101.221" enable-background="new 0 0 101.223 101.221" xml:space="preserve">
<path opacity="0.7" fill="#137CBD" enable-background="new" d="M50.611,0C22.659,0,0,22.659,0,50.611
c0,27.952,22.66,50.61,50.611,50.61s50.61-22.659,50.61-50.61C101.222,22.659,78.562,0,50.611,0z M69.523,67.95H58.126V50.476
H43.689V67.95H32.293V25.402h11.396v14.437h14.437V25.402h11.397V67.95z"/>
</svg>
</div>
<div id="animal">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="101.109px" height="101.109px" viewBox="0 0 101.109 101.109" enable-background="new 0 0 101.109 101.109" xml:space="preserve">
<g opacity="0.7">
<path fill="#D4440B" d="M51.768,36.479c-0.622-2.508-1.032-4.305-1.229-5.391c-0.178,1.007-0.528,2.47-1.052,4.783
c-0.523,2.311-1.686,6.631-3.48,13.462h9.212l-1.865-6.915C52.92,40.837,52.389,38.987,51.768,36.479z"/>
<path fill="#D4440B" d="M50.553-0.001c-27.921,0-50.555,22.635-50.555,50.557c0,27.92,22.633,50.555,50.555,50.555
c27.921,0,50.556-22.635,50.556-50.555C101.11,22.634,78.474-0.001,50.553-0.001z M59.782,66.788l-2.134-8.349h-14.07l-2.191,8.349
H28.53l14.131-44.02h15.607l14.31,44.02H59.782z"/>
</g>
</svg>
</div>
<div id="environment">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="101.109px" height="101.109px" viewBox="0 0 101.109 101.109" enable-background="new 0 0 101.109 101.109" xml:space="preserve">
<path opacity="0.7" fill="#008A2C" enable-background="new" d="M50.556-0.001c-27.921,0-50.557,22.637-50.557,50.556
c0,27.922,22.636,50.556,50.557,50.556c27.92,0,50.555-22.634,50.555-50.556C101.111,22.636,78.476-0.001,50.556-0.001z
M63.365,33.938H49.704v7.59h12.902v9.107H49.704v7.59h13.661v9.866H37.562V24.83h25.805L63.365,33.938L63.365,33.938z"/>
</svg>
</div>
</div>
</div>
<div class="col-sm-8">
<h3>A Comprehensive Approach</h3>
<p>One Health recognizes that the health of humans, animals, and the environment all are connected.</p>
</div>
</div>
这是我的css：
.animation {
position: relative;
}
#human {
position: absolute;
top: 15px;
left: 180px;
}
#animal {
position: absolute;
top: 100px;
left: 95px;
animation-name: animal;
animation-iteration-count: infinite;
animation-duration: 7s;
animation-direction: alternate;
}
@keyframes animal {
from {top: 100px; left:95px;}
to {top: 83px; left:140px;}
}
#environment {
position: absolute;
top: 100px;
left: 265px;
animation-name: environment;
animation-iteration-count: infinite;
animation-duration: 7s;
animation-direction: alternate;
}
@keyframes environment {
from {top: 100px;left: 265px;}
to {top: 83px; left:220px;}
}
答案 0 :(得分：1)
我建议您使用transition: translate()而不是及时更改圆圈的绝对位置。动画效果更加顺畅。
.animation {
position: relative;
}
#human {
position: absolute;
top: 15px;
left: 125px;
}
#animal {
position: absolute;
top: 100px;
left: 90px;
animation-name: animal;
animation-iteration-count: infinite;
animation-duration: 7s;
animation-direction: alternate;
}
@keyframes animal {
from {
transform: translateY(-100px);
transform: translateX(-85px);
}
to {
transform: translateY(-10px);
translateX(-80px);
}
}
#environment {
position: absolute;
top: 98px;
left: 168px;
animation-name: environment;
animation-iteration-count: infinite;
animation-duration: 7s;
animation-direction: alternate;
}
@keyframes environment {
from {
transform: translateY(-100px);
transform: translateX(65px);
}
to {
transform: translateY(-10px);
translateX(80px);
}
}<div class="container">
<div class="col-sm-4">
<div class="animation">
<div id="human">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="101.223px" height="101.221px" viewBox="0 0 101.223 101.221" enable-background="new 0 0 101.223 101.221" xml:space="preserve">
<path opacity="0.7" fill="#137CBD" enable-background="new " d="M50.611,0C22.659,0,0,22.659,0,50.611
c0,27.952,22.66,50.61,50.611,50.61s50.61-22.659,50.61-50.61C101.222,22.659,78.562,0,50.611,0z M69.523,67.95H58.126V50.476
H43.689V67.95H32.293V25.402h11.396v14.437h14.437V25.402h11.397V67.95z" />
</svg>
</div>
<div id="animal">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="101.109px" height="101.109px" viewBox="0 0 101.109 101.109" enable-background="new 0 0 101.109 101.109" xml:space="preserve">
<g opacity="0.7">
<path fill="#D4440B" d="M51.768,36.479c-0.622-2.508-1.032-4.305-1.229-5.391c-0.178,1.007-0.528,2.47-1.052,4.783
c-0.523,2.311-1.686,6.631-3.48,13.462h9.212l-1.865-6.915C52.92,40.837,52.389,38.987,51.768,36.479z" />
<path fill="#D4440B" d="M50.553-0.001c-27.921,0-50.555,22.635-50.555,50.557c0,27.92,22.633,50.555,50.555,50.555
c27.921,0,50.556-22.635,50.556-50.555C101.11,22.634,78.474-0.001,50.553-0.001z M59.782,66.788l-2.134-8.349h-14.07l-2.191,8.349
H28.53l14.131-44.02h15.607l14.31,44.02H59.782z" />
</g>
</svg>
</div>
<div id="environment">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="101.109px" height="101.109px" viewBox="0 0 101.109 101.109" enable-background="new 0 0 101.109 101.109" xml:space="preserve">
<path opacity="0.7" fill="#008A2C" enable-background="new " d="M50.556-0.001c-27.921,0-50.557,22.637-50.557,50.556
c0,27.922,22.636,50.556,50.557,50.556c27.92,0,50.555-22.634,50.555-50.556C101.111,22.636,78.476-0.001,50.556-0.001z
M63.365,33.938H49.704v7.59h12.902v9.107H49.704v7.59h13.661v9.866H37.562V24.83h25.805L63.365,33.938L63.365,33.938z" />
</svg>
答案 1 :(得分：1)
//Primero consultamos el numero de ordenes necesarias para aplicar la bonificacion y el porcentaje
$sql = "SELECT
(SELECT valor FROM lc_t_configuracion where id_conf = 18) as ventas_necesarias,
(SELECT valor FROM lc_t_configuracion where id_conf = 19) as porcentaje_bonificacion,
(SELECT (ventas_acumuladas) FROM lc_t_usuarios where id_usuario = $_SESSION[id_usuario]) as ventas_acumuladas
";
$respuesta = mysqli_query($conexion, $sql) or die(mysqli_error($conexion));
$datos_promocion = mysqli_fetch_array($respuesta, MYSQLI_ASSOC);
//print_r($datos_promocion);
$bono = 0;
//si las ventas acumuladas son mayores o iguales a las necesarias se aplica la promocion
if($datos_promocion['ventas_acumuladas'] >= $datos_promocion['ventas_necesarias'] && $_SESSION['tipo_usuario'] == 'C' && $_SESSION['cliente_vip'] == "N"){
//echo "es mayor o igual que lo necesario";
$limit = $datos_promocion['ventas_necesarias'] - 1;
$sql = "SELECT
ROUND(((SUM(total) + $_POST[total]) * ($datos_promocion[porcentaje_bonificacion]/100)),0) as total
FROM
(
SELECT
total
FROM
lc_t_ordenes
WHERE
id_usuario = $_SESSION[id_usuario]
ORDER BY id_orden DESC
LIMIT $limit
) AS t1";
$respuesta = mysqli_query($conexion, $sql) or die(mysqli_error($conexion));
$bono = mysqli_fetch_array($respuesta);
$bono = $bono['total'];
$sql = "INSERT INTO `lc_t_preordenes`
(
`id_usuario`,
`cantidad`,
`descripcion`,
`subtotal`
)
VALUES
(
'$_SESSION[id_usuario]',
'1',
'Bonificación por bono acumulado',
'$bono'
);";
$respuesta = mysqli_query($conexion, $sql) or die(mysqli_error($conexion));
$_POST['total'] -= $bono;
if(intval($_POST['total']) < 0){
$_POST['total'] = 0 ;
}
$sql = "UPDATE
`lc_t_usuarios` SET
`ventas_acumuladas`= 0
WHERE `id_usuario`= $_SESSION[id_usuario];";
$respuesta = mysqli_query($conexion, $sql) or die(mysqli_error($conexion));
}else{
//echo "NO es mayor o igual que lo necesario";
//como no se volvio acredor de la promocion se acumula una venta acumulada mas
$sql = "UPDATE
`lc_t_usuarios` SET
`ventas_acumuladas`= (ventas_acumuladas + 1)
WHERE `id_usuario`= $_SESSION[id_usuario];";
$respuesta = mysqli_query($conexion, $sql) or die(mysqli_error($conexion));
}
//die();
.animation {
position: relative;
background-color: orange;
/* because the content is absolutely positioned the container is 0 height*/
min-height: 200px;
}
#human {
position: absolute;
top: 15px;
left: 90px;
}
#animal {
position: absolute;
top: 100px;
left: 45px;
animation-name: animal;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-direction: alternate;
}
@keyframes animal {
from {
transform: translateY(-100px);
transform: translateX(-35px);
}
to {
transform: translateY(-10px);
translateX(-80px);
}
}
#environment {
position: absolute;
top: 98px;
left: 140px;
animation-name: environment;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-direction: alternate;
}
@keyframes environment {
from {
transform: translateY(-100px);
transform: translateX(35px);
}
to {
transform: translateY(-20px);
translateX(80px);
}
}
我真的很喜欢@K添加的更平滑的过渡。 Daniek，所以我在这个答案中补充说。我留下了背景颜色，你可以看到发生了什么。首先，动画需要包含在该空间内（左手引导列）。其次，移动设备重叠的原因是因为动画容器的高度为0。这是因为它的子（动画片段）被绝对位置定位在正常流动之外。为了使我的示例工作，我必须给动画容器一个高度。我也调整了动画并稍微调高了一点，但你得到了要点。希望这会有所帮助。
在完整视图和较小视图之间来回切换以查看发生的情况。
答案 2 :(得分：0)
我在这里可能有点晚了，但我得到了一些建议。
如前所述，使用transform或animation时应使用CSS属性transition。它大大提高了性能。
您无需在动画中指定初始值，因为它们已在您的类中声明。
例如：
#animal {
top: 100px;
left: 45px;
animation: animal 1s linear;
}
@keyframes animal {
from {top: 100px; left:45px;}
to {top: 83px; left:90px;}
}
使用以下内容具有相同的效果：
@keyframes animal {
to {top: 83px; left:90px;}
}
对于SVG，您可以使用带符号的spritesheet并使用<use>标签创建SVG图标，您可以使用CSS设置样式和动画。
#spritesheet {
display: none;
}
.animation {
text-align: center;
min-height: 200px;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.icon--human,
.icon--animal,
.icon--environment {
font-size: 6em;
opacity: .7;
}
.icon--human {
color: #137CBD;
}
.icon--animal {
color: #D4440B;
transform: translateY(100px);
animation: animal 7s linear infinite alternate;
;
}
.icon--environment {
color: #008A2C;
transform: translateY(100px);
animation: environment 7s linear infinite alternate;
}
@keyframes animal {
to {
transform: translate(60px, 60px);
}
}
@keyframes environment {
to {
transform: translate(-60px, 60px);
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class=" col-md-4 col-sm-6">
<div class="animation">
<svg class="icon icon--animal">
<use xlink:href="#animal"></use>
</svg>
<svg class="icon icon--human">
<use xlink:href="#human"></use>
</svg>
<svg class="icon icon--environment">
<use xlink:href="#environment"></use>
</svg>
</div>
</div>
<div class="col-md-8 col-sm-6">
<h3>A Comprehensive Approach</h3>
<p>One Health recognizes that the health of humans, animals, and the environment all are connected.</p>
</div>
</div>
<svg id="spritesheet">
<symbol id="human" viewBox="0 0 101.223 101.221">
<path fill="currentColor" d="M50.611,0C22.659,0,0,22.659,0,50.611
c0,27.952,22.66,50.61,50.611,50.61s50.61-22.659,50.61-50.61C101.222,22.659,78.562,0,50.611,0z M69.523,67.95H58.126V50.476
H43.689V67.95H32.293V25.402h11.396v14.437h14.437V25.402h11.397V67.95z" />
</symbol>
<symbol id="animal" viewBox="0 0 101.109 101.109">
<g>
<path fill="currentColor" d="M51.768,36.479c-0.622-2.508-1.032-4.305-1.229-5.391c-0.178,1.007-0.528,2.47-1.052,4.783
c-0.523,2.311-1.686,6.631-3.48,13.462h9.212l-1.865-6.915C52.92,40.837,52.389,38.987,51.768,36.479z" />
<path fill="currentColor" d="M50.553-0.001c-27.921,0-50.555,22.635-50.555,50.557c0,27.92,22.633,50.555,50.555,50.555
c27.921,0,50.556-22.635,50.556-50.555C101.11,22.634,78.474-0.001,50.553-0.001z M59.782,66.788l-2.134-8.349h-14.07l-2.191,8.349
H28.53l14.131-44.02h15.607l14.31,44.02H59.782z" />
</g>
</symbol>
<symbol id="environment" viewBox="0 0 101.109 101.109">
<path fill="currentColor" d="M50.556-0.001c-27.921,0-50.557,22.637-50.557,50.556
c0,27.922,22.636,50.556,50.557,50.556c27.92,0,50.555-22.634,50.555-50.556C101.111,22.636,78.476-0.001,50.556-0.001z
M63.365,33.938H49.704v7.59h12.902v9.107H49.704v7.59h13.661v9.866H37.562V24.83h25.805L63.365,33.938L63.365,33.938z" />
</symbol>
</svg>
最后请注意，您应该使用animation简写而不是分隔所有属性，这会减少您的CSS代码。