运行 css div 页面加载时的过渡

Question

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

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

基本上我想要的只是我的 div 'sheree_text_wrapper' 开始 canvas 并移动到页面加载时的位置。我会满足于缓慢淡入，任何事情，现在不能使用 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

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

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

运行 css div 页面加载时的过渡

Run css div transition on page load

css

jquery

transform

translate-animation