html怎么设置封面计时,html - CSS背景封面动画计时 - 堆栈内存溢出

我正在尝试获取动画定时，但是它不起作用。 我有下面使用引导程序的HTML代码和相关的CSS代码。

我想做的是将背景图像设置为进行过渡动画的持续时间为1.5s，将经过它的文本进行为时2.5s。 但是我意识到，编辑“ introB”的css会影响整个超大屏幕部分，使两者的计时完全相同。

我想知道是否有人会知道如何用文本分隔背景图像，以便为它们做两个不同的动画。

HTML代码

I'm a Developer, Designer and Amateur Photographer living in Canada Ottawa.

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;

}

我在这里先向您的帮助表示感谢！