那些遇到过的问题

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

Nol*_*der 2 css keyframe css-animations

所以我想在我的页眉中有一些元素，它们使用 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;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

Har*_*rry 7

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

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

以下是动画的CSS 规范对此的说明：

此外，动画通常不会在动画延迟到期之前或动画结束后影响计算值，但可能会影响动画填充模式属性。

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

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

以下是MDN 页面关于 animation-fill-mode 属性的摘录：

向后

动画将在应用于目标后立即应用在第一个相关关键帧中定义的值，并在动画延迟期间保留该值。第一个相关关键帧取决于 animation-direction 的值：

两个都

动画将遵循向前和向后的规则，从而在两个方向上扩展动画属性。

简而言之，以下是您需要做的。请注意，我在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;
}
Run Code Online (Sandbox Code Playgroud) 

.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;
}
Run Code Online (Sandbox Code Playgroud) 
@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;
  }
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

3083 次

最近记录：

8 年，11 月 前
相关归档
如何使用jQuery取消设置元素的CSS属性？ 87
如何在CSS中指定表填充？(表,不是单元格填充) 59
如何在CSS中控制列表样式光盘的大小？ 53
当position:fixed应用时,是否可以保持父元素的宽度？ 49
如何垂直对齐浮动div到底部？ 48
AngularJS - ng-style不更新css后台属性 46
为什么在使用子选择器时table> tr> td不起作用？ 39
css子填充使它抽出父母的一面 27
伪元素后的CSS(转换) - 如何转换在悬停时显示的内容 25
Div扩展到视觉填充垂直空间 18
难疑归档
使用"let"和"var"在JavaScript中声明变量有什么区别？ 4199
撤消尚未推送的Git合并 3695
如何使用CSS垂直居中文本？ 2190
将零填充到字符串的最好方法 1309
"javascript:void(0)"是什么意思？ 1292
Promises和Observables有什么区别？ 1291
如何一次删除所有Git stashes？ 1280
有没有办法从APK文件中获取源代码？ 1218
如何查看仅一个用户提交的git日志？ 1178
如何查找Python中是否存在目录 1048