滑块元素动画延迟

Question

我想制作一个带有向上滑动文本和按钮的图像滑块。我希望元素显示延迟但不起作用，首先加载每个元素，然后运行动画。

这是我的密码小提琴

@keyframes slide-up {
from {
padding-top: 100px;
opacity: 0;
}
to {
padding-top: 0;
opacity: 1;
}
.slide-heading {
font-size: 50px;
font-weight: 900;
margin: 0 0 30px 0;
width: 50%;
animation: slide-up 1s;
animation-iteration-count: 1;
animation-delay: 1s;
}
.slide-text {
line-height: 1.75;
font-size: 13px;
font-weight: 300;
width: 50%;
margin: 0 0 60px 0;
animation: slide-up 1s;
animation-iteration-count: 1;
animation-delay: 2s;
}
.slide-btn {
animation: slide-up 1s;
animation-iteration-count: 1;
animation-delay: 3s;
}
}

<div class="slide-heading">Lorem Ipsum </div>
<div class="slide-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis est metus, ac viverra quam rutrum vitae. Phasellus eget egestas arcu. Nulla porttitor at justo egestas ornare. </div>
<div class="slide-btn"><button class="btn btn-primary" type="submit">More</button></div>

Answer 1

添加animation-fill-mode: backwards;

CSS动画在播放第一个关键帧之前或播放最后一个关键帧之后不会影响元素。动画填充模式属性可以覆盖此行为。

backward--->元素将获得由第一个关键帧(取决于动画方向(，并保留该关键帧在动画延迟期间

https://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

试试这个：

@keyframes slide-up {
from {
padding-top: 100px;
opacity: 0;
}
to {
padding-top: 0;
opacity: 1;
}
.slide-heading {
font-size: 50px;
font-weight: 900;
margin: 0 0 30px 0;
width: 50%;
animation: slide-up 1s;
animation-fill-mode: backwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
.slide-text {
line-height: 1.75;
font-size: 13px;
font-weight: 300;
width: 50%;
margin: 0 0 60px 0;
animation: slide-up 1s;
animation-fill-mode: backwards;
animation-iteration-count: 1;
animation-delay: 2s;
}
.slide-btn {
animation: slide-up 1s;
animation-fill-mode: backwards;
animation-iteration-count: 1;
animation-delay: 3s;
}
}

希望它能帮助

Answer 2

在你的动画中产生问题的是填充，你知道填充会与上面的元素保持距离，所以在你的情况下，你必须添加translate属性来一个接一个地动画化你的文本，而不会相互影响，就像这样：

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
.slide-heading {
font-size: 50px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
margin: 100px 0 30px 0;
width: 75%;
animation: slide-up 2s;
animation-iteration-count: 1;
animation-delay: 1s;
}
.slide-text {
line-height: 1.75;
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-weight: 300;
width: 60%;
margin: 0 0 60px 0;
animation: slide-up 5s;
animation-iteration-count: 1;
animation-delay: 1s;
}
.slide-btn {
font-family: 'Roboto', sans-serif;
animation: slide-up 5s;
animation-iteration-count: 1;
animation-delay: 1s;
}
@keyframes slide-up {
from {
transform: translateY(100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

<div class="slide-heading">Lorem Ipsum </div>
<div class="slide-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis est metus, ac viverra quam rutrum vitae. Phasellus eget egestas arcu. Nulla porttitor at justo egestas ornare. </div>
<div class="slide-btn"><button class="btn btn-primary" type="submit">More</button></div>

它有效我已经测试过了。希望它能帮助你。

Answer 3

感谢@Farhan Ali和@mkasp98

@keyframes slide-up {
from {
transform: translateY(100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.slide-heading {
font-size: 50px;
font-weight: 900;
margin: 0 0 30px 0;
width: 50%;
animation: slide-up 1s;
animation-fill-mode: backwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
.slide-text {
line-height: 1.75;
font-size: 13px;
font-weight: 300;
width: 50%;
margin: 0 0 60px 0;
animation: slide-up 1s;
animation-fill-mode: backwards;
animation-iteration-count: 1;
animation-delay: 2s;
}
.slide-btn {
animation: slide-up 1s;
animation-fill-mode: backwards;
animation-iteration-count: 1;
animation-delay: 3s;
}

<div class="slide-heading">Lorem Ipsum </div>
<div class="slide-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis est metus, ac viverra quam rutrum vitae. Phasellus eget egestas arcu. Nulla porttitor at justo egestas ornare. </div>
<div class="slide-btn"><button class="btn btn-primary" type="submit">More</button></div>