I wanted to incorporate a box with text that would fly in from the right upon page load using animate css.
Unfortunately, I encountered some issues with animate css as it disrupted the stacking order of my page.
All I really need is for my 'sheree_text_wrapper' div to begin off-screen and smoothly move into its designated position on page load. I am open to a subtle fade-in effect or any alternative, as the current static state is quite uninteresting without the use of animate.css.
The box's movement is responsive to the viewport width, which is why it already has transition times assigned to it.
Your assistance would be greatly appreciated. Thank you in advance
HTML
<div class="sheree_text_wrapper">
<h1>SHEREE WALKER</h1>
<nav>
<ul id="hero_menu">
<li> <a href="#about" class="scroll">About</a> </li>
<li>|</li>
<li> <a href="#portfolio" class="scroll">Portfolio</a> </li>
<li>|</li>
<li> <a href="#contact" class="scroll">Contact</a> </li>
</ul>
</nav>
</div>
CSS
.sheree_text_wrapper {
min-width:220px;
width:270;
height:33px;
z-index:10;
margin-left:auto;
margin-right:auto;
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-o-transition: 1s ease;
-ms-transition: 1s ease;
}