Abbey Abbey - 2 months ago 5
CSS Question

Positioning Css Animation within Bootstrap Grid

I am creating a css animation which I want to put into the bootstrap grid system. Elements in the animation have been set to position: absolute which is making my text cover up the animation when it breaks down on mobile. How do I fix this so that the text goes under the animation when it breaks down?

Here is a link to my code:
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>


Here is my 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;}
}

Answer

.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);
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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" style="background-color: pink;">
      <h3>A Comprehensive Approach</h3>
      <p>One Health recognizes that the health of humans, animals, and the environment all are connected.</p>
   </div>
</div>

I really like the smoother transition added by @K. Daniek, so I added that in this answer. I left background colors in so you could see what is going on. First the animation needs to be contained within that space (left hand bootstrap column). Second the reason for the overlap in mobile is because the container of the animation has 0 height. This is because its children (animated pieces) are positioned out of the normal flow by position absolute. To make my example work I had to give the animation container a height. I also adjusted the animation and goofed it up a bit but you get the gist. Hope this helps.

Switch back and forth between full view and smaller view to see what is happening.