Question

我想从我的div类“fadeOut”中制作一个文本，在显示2秒后消失。

使用css转换有一种简单的方法吗？

            $('#errMsg').append('<div class="fadeOut">Beware</div>')

Answer 1

您可以使用css过渡属性transition-delay：

.element {
  transition-delay: 3s;
}

以下是适用的transition属性列表：

/* property name | duration | timing function | delay */
transition: all 4s ease-in-out 1s;

您可以在此处详细了解转换延迟： https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay

Answer 2

看起来你正在使用jQuery

试试这个

$('#errMsg').append('<div class="fadeOut">Beware</div>').delay(2000).fadeOut();

如果您需要纯CSS解决方案，请尝试使用

＆＃13;

#errMsg {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        opacity:0
    }
}

＆＃13;

<div id='errMsg'>This is will hide after 5 seconds</div>

＆＃13;

当我的文字出现css时淡出效果

2 个答案: