Am working on a project where am inserting some code of CSS3 animation onto a website made with a template.
There occurred some problem where the animated items are out of size.
Here's the website(Scroll down for the animation)
Here's the fiddle of the animation if anyone wants to check that out.
Some basic code that maybe of use..
CSS:
#backgroundAnimation{
color:#3c3c3c;
}
#containerAnimation{
margin:0 auto;
/* float : left;*/
text-align: center;
height: 100%;
width:100%;
}
#innerWrapperAnimation{
margin: 0 auto;
border: 2px solid;
float:none;
position: relative;
overflow:hidden;
width:100%;
display:block;
height: auto;
background: no-repeat scroll 0 0;
background-size: 100% 100%;
max-width: 1460px;
}
HTML:
<div id="containerAnimation">
<div id="innerWrapperAnimation">
<div><img class="lightsAnimation" id="light1Animation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Light-1.png" /></div>
<img class="lightsAnimation" id="light2Animation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Light-2.png" />
<img class="lightsAnimation" id="cameraFlashAnimation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Camera-Flash.png" />
<img id="backgroundAnimation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/bg3.png" />
<img class="boxAnimation" id="goodBox1" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
<img class="boxAnimation" id="goodBox2" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
<img class="boxAnimation" id="goodBox3" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
<img class="boxAnimation" id="goodBox4" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
<img class="boxAnimation" id="goodBox5" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
<img id="badBox1" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-2.png" />
<img id="pistonBase" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/piston_base.png" />
<img id="pistonHead" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/piston_head.png" />
<img id="pistonOutline" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/piston_top.png" />
<div id="waveDisplay"><img id="waveImage" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Vital-sign-1.png" /></div>
</div>
</div>
Am pretty bad at css,if someone could help me out by using the firebug or any other debugger and point me out where i need to make the change. That would be great.
I think its a really small issue for you professionals out there.
Update: The height of the animated container changes within the website. I think that's the issue.