现在我的代码会显示动画然后应用2秒延迟然后动画运行。
如何让动画在延迟之前首先出现,然后再动画?
@-webkit-keyframes fadeInUp1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUp1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
.fadeInUp1 {
-webkit-animation-name: fadeInUp1;
animation-name: fadeInUp1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
答案 0 :(得分:0)
您可以使用animation-fill-mode
:
animation-fill-mode
CSS属性指定CSS动画的方式 应该在执行之前和之后将样式应用于目标。<强>向后强>
一旦应用到目标,动画将应用第一个相关keyframe中定义的值,并且 在animation-delay期间保留此内容。
.fadeInUp1 {
animation-fill-mode: backwards;
}
@-webkit-keyframes fadeInUp1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUp1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
.fadeInUp1 {
-webkit-animation-name: fadeInUp1;
animation-name: fadeInUp1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
&#13;
<div class="fadeInUp1">Lorem ipsum</div>
&#13;