Run css div transition on page load

Question

I was using animate css to have a box which contained text, fly in from the right on page load.

As it turns out animate css is a bit of headache as it messes up the stacking order of my page.

Essentially all I want is my div 'sheree_text_wrapper' to start off canvas and move to its position on page load. I'd settle for a slow fade in, anything, it's just very boring now without being able to use animate.css

The box moves around depending on the viewport width - hence why it already has transition times on it.

Any help would be great. Thanks 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;
}

Answer 1

You could position it off screen at start add a class once the document is loaded that will give its end position:

JS Fiddle

.sheree_text_wrapper {
    position: relative;
    left: -100%;
    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;
}
.sheree_text_wrapper.show{
   left: 0;
}

Jquery - addClass():

$(document).ready(function() {
    $('.sheree_text_wrapper').addClass('show');
});