Question

我有这段代码，我想使用动画的速记，但它不起作用。

.box-thank-you__container .leads-container {
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    animation-name: fadein;
    opacity: 0;
    animation-timing-function: ease-in;
    /*animation: fadein 0.3s ease-in forwards;*/
}

这是我的关键帧代码：

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

我对动画速记发表了评论，因为它不起作用。有人知道为什么吗？

Answer 1

您的代码运行正常。我提高了animation-duration的显示范围，请检查以下内容：

.box-thank-you__container .leads-container {
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-name: fadein;
    opacity: 0;
    animation-timing-function: ease-in;
    /*animation: fadein 0.3s ease-in forwards;*/
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

<div class="box-thank-you__container">
  <div class="leads-container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>

</div>

根据您更新的代码，请检查以下链接：

https://jsfiddle.net/fusp34y2/

速记动画在我的CSS工作表中不起作用

1 个答案: