在页面加载时运行 css div 转换

Question

我使用动画 css 有一个包含文本的框，在页面加载时从右侧飞入。

事实证明，动画 css 有点让人头疼，因为它弄乱了我页面的堆叠顺序。

基本上我想要的只是我的 div 'sheree_text_wrapper' 来启动画布并在页面加载时移动到它的位置。我会满足于缓慢淡入，任何东西，现在无法使用 animate.css 非常无聊

框根据视口宽度移动 - 因此它上面已经有过渡时间。

任何帮助都会很棒。 提前致谢

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

您可以在开始时将其置于屏幕外，在文档加载后添加一个类，该类将给出其结束位置：

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');
});