一些动画css效果使div更小

Question

我的jsfiddle在这里：https://jsfiddle.net/yak8h1rf/1/

Css代码：

.animaEmerge {
  background-color: transparent;
  -webkit-animation-name: emerge;
  -webkit-animation-duration: 4s;
  animation-name: emerge;
  animation-duration: 4s;
}

@-webkit-keyframes emerge {
  from {
    background-color: lightskyblue;
  }
  to {
    background-color: transparent;
  }
}

@keyframes emerge {
  from {
    background-color: lightskyblue;
  }
  to {
    background-color: transparent;
  }
}

我的问题是在我的浏览器中，（Chrome 59.0.3071.115）

这样显示

这太丑了，为什么在jsfiddle中，没关系，但在浏览器中，它已经崩溃了？

我如何在jsfiddle中修复它，

我想让它不要改变它的宽度。

Answer 1

我不知道我是否正确理解了你的问题。如果要将div宽度设置为容器的完整大小，请更改
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
到
<div class="col-lg-6 col-md-6 col-sm-8 col-xs-12" style="width:100%">

以下是Jsfiddle

.animaEmerge {
  background-color: transparent;
  -webkit-animation-name: emerge;
  -webkit-animation-duration: 4s;
  animation-name: emerge;
  animation-duration: 4s;
}

@-webkit-keyframes emerge {
  from {
    background-color: lightskyblue;
  }
  to {
    background-color: transparent;
  }
}

@keyframes emerge {
  from {
    background-color: lightskyblue;
  }
  to {
    background-color: transparent;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid" id="contentsbox">

  <div class="row" style="padding-top: 10px;">
    <div class="col-lg-6 col-md-6 col-sm-8 col-xs-12" style="width:100%">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-left animaEmerge" style="background-color: transparent; font-size:14px; color:black; border-width : 1px; border-color:#c4dce8; border-style: solid; height: auto;">
          <p>Here will be smaller</p>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right" style="background-color: #c4dce8; font-size:14px; color: #999999; height: auto;">
          <p>It's okay without .animaEmerge</p>
        </div>
      </div>
    </div>