touchingtwist touchingtwist - 2 months ago 6
CSS Question

Some animation css effect makes div smaller

My jsfiddle is here : https://jsfiddle.net/yak8h1rf/1/

Css code :

.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;
}
}


My problem is that in my browser, (Chrome 59.0.3071.115)

This shows like this

enter image description here

That is so ugly, Why in jsfiddle, it's okay but in browser, it's crashed?

How can i fix it like in jsfiddle,

I want to make it do not change it's width.

Answer Source

I don't know whether I understood your question correctly. If you want to set the div width to full size to container, change
<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">
to
<div class="col-lg-6 col-md-6 col-sm-8 col-xs-12" style="width:100%">

Here is the 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>