使用纯 CSS3 关键帧（无 JS），具有动画延迟的元素会在淡入淡出之前短暂出现

Question

所以我想在页眉中使用 CSS3 关键帧在页面加载时向上滑动和淡入的一些元素。虽然动画本身工作正常，但具有延迟的元素在动画之前会以其最终状态出现一瞬间。我目前不知道任何 JavaScript 所以我希望在 HTML/CSS 中有一个纯粹的解决方案。可以吗？

JSFiddle

* {
  font-family: 'Varela', sans-serif;
}

body {
  padding: 0;
  margin: 0;
  background-color: rgb(90, 120, 240);
}

a {
  text-decoration: none;
  color: inherit;
  font-size: inherit;
}

/***************************
HEADER
***************************/

.header-banner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  height: 250px;
  -webkit-animation: slide-in 1s;
  -moz-animation: slide-in 1s;
  -o-animation: slide-in 1s;
  animation: slide-in 1s;
  padding: 0 0 60px 0;
}

.header-banner h1,
.header-banner h2,
.header-banner a {
  font-family: 'Varela', sans-serif;
  color: white;
  text-align: center;
  padding: 0 40px;
  margin: 10px 0;
}

.header-banner h2,
.header-banner a {
  font-weight: normal;
}

.header-banner h1 {
  font-size: 2em;
  -webkit-animation: slide-in 1s;
  -moz-animation: slide-in 1s;
  -o-animation: slide-in 1s;
  animation: slide-in 1s;
}

.header-banner h2 {
  font-size: 1.2em;
  -webkit-animation: slide-in 1s 0.2s forwards;
  -moz-animation: slide-in 1s 0.2s forwards;
  -o-animation: slide-in 1s 0.2s forwards;
  animation: slide-in 1s 0.2s forwards;
}

.header-banner a {
  font-size: 0.9em;
  font-weight: bolder;
  padding: 15px 40px;
  border-radius: 5px;
  letter-spacing: 0.05em;
  background-color: rgb(0, 221, 221);
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
  transition: 0.3s ease-in-out;
  margin-top: 60px;
  -webkit-animation: slide-in 1s 0.4s forwards;
  -moz-animation: slide-in 1s 0.4s forwards;
  -o-animation: slide-in 1s 0.4s forwards;
  animation: slide-in 1s 0.4s forwards;
}

.header-banner a:hover {
  transition: 0.3s ease-in-out;
  box-shadow: 0 6px 10px rgba(50, 50, 93, .16), 0 2px 10px rgba(0, 0, 0, .1);
  transform: translateY(-2px);
}


/******************************
KEYFRAMES
******************************/

@-o-keyframes slide-in {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@-moz-keyframes slide-in {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

<header>
  <div class="header-banner">
    <h1>&lt;h1&gt; element (no delay)</h1>
    <h2>I'm an &lt;h2&gt; element with 0.2s of delay</h2>
    <a href="about.html">I'm an &lt;a&gt; element with 0.4s of delay</a>
  </div>
</header>

Answer 1

问题是因为元素是 visible 并且在动画发生延迟后将属性设置为 opacity:0 并在 100% 上设置为 opacity:1 所以你可以通过在加载之前隐藏元素来解决这个问题

https://jsfiddle.net/nrkckt8n/3/

@charset "UTF-8";

/* CSS Document */


/***************************************************************

               GENERAL

***************************************************************/

* {
  font-family: 'Varela', sans-serif;
}

body {
  padding: 0;
  margin: 0;
  background-color: rgb(90, 120, 240);
}

a {
  text-decoration: none;
  color: inherit;
  font-size: inherit;
}


/***************************************************************

               HEADER

***************************************************************/


/*****************************
      BANNER
*****************************/

.header-banner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  height: 250px;
  -webkit-animation: slide-in 1s;
  -moz-animation: slide-in 1s;
  -o-animation: slide-in 1s;
  animation: slide-in 1s;
}

.header-banner h1,
.header-banner h2,
.header-banner a {
  font-family: 'Varela', sans-serif;
  color: white;
  text-align: center;
  padding: 0 40px;
  margin: 10px 0;
}

.header-banner h2,
.header-banner a {
  font-weight: normal;
}

.header-banner h1 {
  font-size: 3em;
  -webkit-animation: slide-in 1s;
  -moz-animation: slide-in 1s;
  -o-animation: slide-in 1s;
  animation: slide-in 1s;
}

.header-banner h2 {
  font-size: 1.5em;
  opacity: 0;
  -webkit-animation: slide-in 1s 0.2s forwards;
  -moz-animation: slide-in 1s 0.2s forwards;
  -o-animation: slide-in 1s 0.2s forwards;
  animation: slide-in 1s 0.2s forwards;
}

.header-banner a {
  font-size: 1.1em;
  font-weight: bolder;
  padding: 15px 40px;
  border-radius: 5px;
  letter-spacing: 0.05em;
  background-color: rgb(0, 221, 221);
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
  transition: 0.3s ease-in-out;
  margin-top: 60px;
  opacity: 0;
  -webkit-animation: slide-in 1s 0.4s forwards;
  -moz-animation: slide-in 1s 0.4s forwards;
  -o-animation: slide-in 1s 0.4s forwards;
  animation: slide-in 1s 0.4s forwards;
}

.header-banner a:hover {
  transition: 0.3s ease-in-out;
  box-shadow: 0 6px 10px rgba(50, 50, 93, .16), 0 2px 10px rgba(0, 0, 0, .1);
  transform: translateY(-2px);
}


/***************************************************************

              KEYFRAMES

***************************************************************/

@-o-keyframes slide-in {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@-moz-keyframes slide-in {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slide-in {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

<!doctype html>
<link href="https://fonts.googleapis.com/css?family=Varela" rel="stylesheet" <header>
<div class="header-banner">
  <h1>&lt;h1&gt; element (no delay)</h1>
  <h2>I'm an &lt;h2&gt; element with 0.2s of delay</h2>
  <a href="about.html">I'm an &lt;a&gt; element with 0.4s of delay</a>
</div>
</header>

Answer 2

虽然 Vito 建议的选项没有错，但最好使用专门为此目的设计的属性或设置来实际实现此目的。

元素在开始时可见，因为在动画延迟期间，@keyframe 规则中指定的属性不会对元素产生任何影响。该元素将继续处于 @keyframes 之外提到的状态。这里没有在 @keyframe 规则之外指定 opacity，因此使用默认值 1 并且元素变为可见。

下面是 CSS specs for Animations say about this:

Furthermore, typically an animation does not affect the computed value before the animation delay has expired or after the end of the animation, but may do so depending on the animation-fill-mode property.

一旦动画开始（即延迟到期），元素将获得应用在 @keyframes 规则中指定的属性（取决于动画从 0 - 100 的进度）。因此，它首先不可见，然后在滑入时变得可见。

强制浏览器在延迟期间应用@keyframes规则中指定的属性的方法是使用animation-fill-mode作为backwards。但是在你的情况下，动画填充模式已经设置为 forwards 和 因此你应该将其更改为 both . both 的值意味着它将遵守 forwards 的规范（即，一旦动画完成，保持最后一个关键帧的状态）和 backwards 的规范（即，在延迟期间保持第一个关键帧的状态。

以下是 MDN page on animation-fill-mode property 的摘录：

backwards

The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period. The first relevant keyframe depends on the value of animation-direction:

both

The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

简而言之，以下是您需要做的。请注意，我在 animation 属性的值末尾所做的更改。为简洁起见，我省略了其他属性，它们出现在演示中。

.header-banner h2 {
  /* other props removed for brevity */
  animation: slide-in 1s 0.2s both;
}

.header-banner a {
  animation: slide-in 1s 0.4s both;
}

@charset "UTF-8";

/* CSS Document */


/***************************************************************

               GENERAL

***************************************************************/

* {
  font-family: 'Varela', sans-serif;
}

body {
  padding: 0;
  margin: 0;
  background-color: rgb(90, 120, 240);
}

a {
  text-decoration: none;
  color: inherit;
  font-size: inherit;
}


/***************************************************************

               HEADER

***************************************************************/


/*****************************
      BANNER
*****************************/

.header-banner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  height: 250px;
  -webkit-animation: slide-in 1s;
  -moz-animation: slide-in 1s;
  -o-animation: slide-in 1s;
  animation: slide-in 1s;
}

.header-banner h1,
.header-banner h2,
.header-banner a {
  font-family: 'Varela', sans-serif;
  color: white;
  text-align: center;
  padding: 0 40px;
  margin: 10px 0;
}

.header-banner h2,
.header-banner a {
  font-weight: normal;
}

.header-banner h1 {
  font-size: 3em;
  -webkit-animation: slide-in 1s;
  -moz-animation: slide-in 1s;
  -o-animation: slide-in 1s;
  animation: slide-in 1s;
}

.header-banner h2 {
  font-size: 1.5em;
  -webkit-animation: slide-in 1s 0.2s both;
  -moz-animation: slide-in 1s 0.2s both;
  -o-animation: slide-in 1s 0.2s both;
  animation: slide-in 1s 0.2s both;
}

.header-banner a {
  font-size: 1.1em;
  font-weight: bolder;
  padding: 15px 40px;
  border-radius: 5px;
  letter-spacing: 0.05em;
  background-color: rgb(0, 221, 221);
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
  transition: 0.3s ease-in-out;
  margin-top: 60px;
  -webkit-animation: slide-in 1s 0.4s both;
  -moz-animation: slide-in 1s 0.4s both;
  -o-animation: slide-in 1s 0.4s both;
  animation: slide-in 1s 0.4s both;
}

.header-banner a:hover {
  transition: 0.3s ease-in-out;
  box-shadow: 0 6px 10px rgba(50, 50, 93, .16), 0 2px 10px rgba(0, 0, 0, .1);
  transform: translateY(-2px);
}


/***************************************************************

              KEYFRAMES

***************************************************************/

@-o-keyframes slide-in {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@-moz-keyframes slide-in {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slide-in {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

<!doctype html>
<link href="https://fonts.googleapis.com/css?family=Varela" rel="stylesheet"

 <header>
   <div class="header-banner">
     <h1>&lt;h1&gt; element (no delay)</h1>
     <h2>I'm an &lt;h2&gt; element with 0.2s of delay</h2>
     <a href="about.html">I'm an &lt;a&gt; element with 0.4s of delay</a>
   </div>
 </header>

使用纯 CSS3 关键帧（无 JS），具有动画延迟的元素会在淡入淡出之前短暂出现

Elements with animation delay briefly appear before fading in using purely CSS3 Keyframes (no JS)

css

keyframe

css-animations