使用css动画在10秒后显示div

Question

使用css动画在10秒后显示div

我正在尝试使用HTML和CSS制作生日卡片.以下是代码示例.

<!DOCTYPE HTML>
<html>

<head>

  <title>Happy Birthday !</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="http://www.happybirthdaycake2015.com/wp-content/uploads/2014/11/Birthday-Cake-Candles.jpeg" />
  <style>
    html {
      -webkit-animation: chngepic 5s;
      /* Chrome, Safari, Opera */
      animation: chngepic 5s;
    }
    @-webkit-keyframes chngepic {
      0% {
        background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRLZJu3R2KoQA9W4EpcTA3oenwpl9MiWd7AcLX1_V6reXxWVQB7);
      }
      50% {
        background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIZiSe34UlhOVSqfjwNwYZ8gcJfJYzWghkAmnNT1NaT1kca-aW);
      }
      100% {
        background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHz_hTYFVeIKvjZtmj55gXwPoWqK_c-RvILhrQGRu9kJ4c-pO9);
      }
    }
    @keyframes chngepic {
      0% {
        background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRLZJu3R2KoQA9W4EpcTA3oenwpl9MiWd7AcLX1_V6reXxWVQB7);
      }
      50% {
        background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIZiSe34UlhOVSqfjwNwYZ8gcJfJYzWghkAmnNT1NaT1kca-aW);
      }
      100% {
        background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHz_hTYFVeIKvjZtmj55gXwPoWqK_c-RvILhrQGRu9kJ4c-pO9);
      }
    }
    div.one {
      -webkit-animation: show 5s;
      /* Chrome, Safari, Opera */
      -webkit-animation-delay: 5s;
      /* Chrome, Safari, Opera */
      animation: show 5s;
      animation-delay: 5s;
    }
    div.two {
      -webkit-animation: show 5s;
      /* Chrome, Safari, Opera */
      -webkit-animation-delay: 10s;
      /* Chrome, Safari, Opera */
      animation: show 5s;
      animation-delay: 10s;
    }
    div.three {
      -webkit-animation: show 5s;
      /* Chrome, Safari, Opera */
      -webkit-animation-delay: 15s;
      /* Chrome, Safari, Opera */
      animation: show 5s;
      animation-delay: 15s;
    }
    /* Chrome, Safari, Opera */
    @-webkit-keyframes show {
      from {
        display: block;
      }
      to {
        display: none;
      }
    }
    @keyframes show {
      from {
        display: block;
      }
      to {
        display: none;
      }
    }
  }
  </style>

</head>

<body>
  <center>
    <div class="one" style="display: none;">
      <h1>Happy Birthday</h1>
    </div>
    <div class="two" style="display: none;">
      <p>Another year has passed,</p>
      <p>It's your birthday once more,</p>
      <p>You should feel very special,</p>
      <p>And let your spirit soar.</p>

      <p>Celebrate every moment,</p>
      <p>There's no time to be blue,</p>
      <p>Today is your birthday,</p>
      <p>Today is all about you.

        <p>May you always find joy,</p>
        <p>North, south, east and west,</p>
        <p>Happy, happy birthday to you,</p>
        <p>I wish you the very best.</p>
    </div>
    <div class="three" style="display: none;">
      <h2>Happy Birthday Dear!!</h2>
    </div>
  </center>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

我想要做的是在显示几个图像后,我想一个接一个地显示div中的内容.第一个div用1级然后是2然后3.我有上面的代码但不能正常工作.在stops中图像diplaying后我想只使用CSS而不是js或jquery

Answer 1

Pau*_*e_D 5

首先,你不能动画display属性,所以我建议使用opacity.

此外,类名不能以数字开头.

最后,要结束动画并保留最终属性,您必须使用animation-fill-mode.在这种情况下,值将是forwards.

html {
    -webkit-animation: chngepic 5s;
    /* Chrome, Safari, Opera */
    animation: chngepic 5s;
    background-repeat: no-repeat;

}
@-webkit-keyframes chngepic {
    0% {
        background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRLZJu3R2KoQA9W4EpcTA3oenwpl9MiWd7AcLX1_V6reXxWVQB7);
    }
    50% {
        background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIZiSe34UlhOVSqfjwNwYZ8gcJfJYzWghkAmnNT1NaT1kca-aW);
    }
    100% {
        background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHz_hTYFVeIKvjZtmj55gXwPoWqK_c-RvILhrQGRu9kJ4c-pO9);
    }
}
@keyframes chngepic {
    0% {
        background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRLZJu3R2KoQA9W4EpcTA3oenwpl9MiWd7AcLX1_V6reXxWVQB7);
    }
    50% {
        background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIZiSe34UlhOVSqfjwNwYZ8gcJfJYzWghkAmnNT1NaT1kca-aW);
    }
    100% {
        background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHz_hTYFVeIKvjZtmj55gXwPoWqK_c-RvILhrQGRu9kJ4c-pO9);
    }
}
.a,
.b,
.c {
  opacity: 0;
  -webkit-animation: show 5s;
  animation: show 5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.a {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}
.b {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}
.c {
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
}
/* Chrome, Safari, Opera */

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

Run Code Online (Sandbox Code Playgroud)

<div class="a">
  <h1>Happy Birthday</h1>

</div>
<div class="b">
  <p>Another year has passed,</p>
  <p>It's your birthday once more,</p>
  <p>You should feel very special,</p>
  <p>And let your spirit soar.</p>
  <p>Celebrate every moment,</p>
  <p>There's no time to be blue,</p>
  <p>Today is your birthday,</p>
  <p>Today is all about you.</p>
  <p>May you always find joy,</p>
  <p>North, south, east and west,</p>
  <p>Happy, happy birthday to you,</p>
  <p>I wish you the very best.</p>
</div>
<div class="c">
  <h2>Happy Birthday Dear!!</h2>

</div>

Run Code Online (Sandbox Code Playgroud)

关于fill-mode @ Sitepoint.com的有用文章

归档时间：	10 年，8 月前
查看次数：	1280 次
最近记录：	10 年，3 月前