Question

我试图淡出一个元素，保持该元素淡出，比如5秒，然后淡出元素。我试图只使用CSS而不是jQuery来实现这一点。

目前我设置了两个元素，在2秒后开始淡入淡出，淡出持续时间为2秒，然后在持续时间结束后立即重新出现。

代码：

CSS：

.hideMe1{
     animation:hideMe 0.5s 1;
    -webkit-animation:hideMe 2s 1; /* Duration of fading and repetitions */
    animation-fill-mode: forwards;

    animation-delay:2s; /* Pause before fade */
    -webkit-animation-delay:2s; /* Safari and Chrome */
    -webkit-animation-fill-mode: backwards;  /* End by showing the content */
} 

.hideMe2{
     animation:hideMe 0.5s 1;
    -webkit-animation:hideMe 2s 1; /* Duration of fading and repetitions */
    animation-fill-mode: forwards;

    animation-delay:2.5s; /* Pause before fade */
    -webkit-animation-delay:3s; /* Safari and Chrome */
    -webkit-animation-fill-mode: backwards;  /* End by showing the content */
} 

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

@-webkit-keyframes hideMe{
    from {opacity :1;}
    to {opacity :0;}
}

HTML：

<div class="hideMe1">
I'll fade first
</div>
<div class="hideMe2">
My turn to fade
</div>

如何让每个元素在重新出现之前保持褪色5秒（例如）？

Answer 1

要实现这种效果，您必须修改关键帧，如下面的代码段所示。

设置animation-duration，使其成为淡出+暂停+淡入的总时间。在这里，我将持续时间设置为10秒（淡出时间为2.5秒，暂停时间为5秒，淡入时间为2.5秒）。
设置关键帧百分比以匹配预期的持续时间，如下所示：
- 在25%标记处（2.5s只有10s），将opacity从1更改为0。
- 5s暂停时段只是50%的{{1}}，因此要使元素保持其状态，直到10s标记。关键是还要添加75%关键帧（即使元素保持在状态中），否则元素将从75%标记本身开始淡入。
- 从25%标记处开始，使元素75%逐渐从opacity更改为0，从而产生淡入效果。

注意：我删除了属性的供应商前缀版本以保持演示简单，并且我还删除了1和{{1}的重复声明在任何时候，浏览器只能使用一个。 Webkit浏览器将使用前一个出现的前缀，而其他浏览器将使用未加前缀的浏览器（因此会导致跨浏览器的差异）。

＆＃13;

animation-fill-mode

＆＃13;

-webkit-animation-fill-mode

＆＃13;

Answer 2

您必须手动使用关键帧来为动画计时。看看这个：

＆＃13;

.blackhd
{
    vertical-align: bottom;
    width: 40px;
    #height: 100px;
    border: 1px solid hotpink;
    background-color: black;
    text-align: center;
}

.vert
{
    display: inline-block;
    color: white;
    #font-weight: bold;
    font-size: 15px;
    writing-mode: vertical-lr;
    #writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    transform-origin: center;
    transform: rotate(180deg);
    padding-top: 2mm;
    padding-bottom: 3mm;
}


<table>
    <tr>
        <td class="blackhd"><span class="vert">abc</span></td>
        <td class="blackhd"><span class="vert">defghijkl</span></td>
    </tr>
    <tr>
        <td>abc</td>
        <td>defghijklmnopqr</td>
    </tr>
</table>

＆＃13;

_factory = new ConnectionFactory
{
        HostName = Settings.HostName, UserName = Settings.UserName, Password = Settings.Password,
        AutomaticRecoveryEnabled = true
};

_connection = _factory.CreateConnection();
Channel = _connection.CreateModel();

Channel.BasicAcks += Channel_BasicAcks;
Channel.BasicNacks += Channel_BasicNacks;
Channel.ConfirmSelect();

Channel.QueueDeclare(Settings.QueueName, true, false, false, null);
}

private void Channel_BasicNacks(object sender, RabbitMQ.Client.Events.BasicNackEventArgs e)
{
    IModel model = (IModel)sender;
    throw new NotImplementedException();
}

＆＃13;

.hideMe1 {
  animation: hideMe 5s 1;
  -webkit-animation: hideMe 5s 1;
  /* Duration of fading and repetitions */
  animation-fill-mode: forwards;
  animation-delay: 2s;
  /* Pause before fade */
  -webkit-animation-delay: 2s;
  /* Safari and Chrome */
  -webkit-animation-fill-mode: backwards;
  /* End by showing the content */
}
.hideMe2 {
  animation: hideMe 5s 1;
  -webkit-animation: hideMe 5s 1;
  /* Duration of fading and repetitions */
  animation-fill-mode: forwards;
  animation-delay: 2.5s;
  /* Pause before fade */
  -webkit-animation-delay: 3s;
  /* Safari and Chrome */
  -webkit-animation-fill-mode: backwards;
  /* End by showing the content */
}
@keyframes hideMe {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1
  }
}

然后将动画速度设置为7s。

淡出，暂停，然后淡入元素 - 仅限CSS

2 个答案: