Question

我试图获得动画时序，但它无法正常工作。我有使用下面的bootstrap的HTML代码和相关的CSS代码。

我想要做的是设置背景图像以进行1.5s持续时间的过渡动画以及经过2.5s持续时间的文本。但我意识到编辑css for＆＃34; introB＆＃34;会影响整个jumbotron部分，使两者的时间完全相同。

我想知道是否有人知道如何将背景图像与文本分开，以便我可以为它们做两种不同的动画。

HTML代码

<section class="jumbotron" id="introB">
    <div class="container">
        <div id="introduction" class="slideUp">
            <h2 class="col-sm-9">I'm a Developer, Designer and Amateur Photographer living in Canada Ottawa.</h2>
        </div>
    </div>
</section>

CSS代码

#introB{
    background-image: url(../images/home.jpg);
    background-size: cover;
    height: 800px;
    position: relative;

   animation-name: slideUp;
    -webkit-animation-name: slideUp;
    -ms-animation-name: slideUp;    
    -o-animation-name: slideUp; 

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;
    -ms-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;
    -ms-animation-timing-function: ease;
    -o-animation-timing-function: ease;

    visibility: visible !important;
}

#introduction h2{
    font-size: 70px;
    color: white;
}

.slideUp{
    animation-name: slideUp;
    -webkit-animation-name: slideUp;
    -ms-animation-name: slideUp;    
    -o-animation-name: slideUp; 

    animation-duration: 2.5s;   
    -webkit-animation-duration: 2.5s;
    -ms-animation-duration: 2.5s;
    -o-animation-duration: 2.5s;

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;
    -ms-animation-timing-function: ease;
    -o-animation-timing-function: ease;

    visibility: visible !important;
}

提前感谢您的帮助！

CSS背景封面动画计时

0 个答案: