具有动画延迟的元素在使用纯CSS3关键帧（没有JS）消失之前会短暂出现

时间：2017-02-24 18:49:03

标签： css css3 css-animations keyframe

所以我希望在我的标题中有一些元素可以使用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>

2 个答案:

答案 0 :(得分：2)

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

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

以下是CSS specs for Animations say about this：

的内容
  

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

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

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

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

的摘录
  

<强>向后

     

动画将在应用于目标时立即应用第一个相关关键帧中定义的值，并在动画延迟期间保留此值。第一个相关的关键帧取决于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;
}


@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>

答案 1 :(得分：0)

问题是因为元素是visible，并且在动画发生后的延迟之后它将属性设置为opacity:0，并且100％设置为opacity:1以便您可以修复通过在加载

之前隐藏元素来解决问题

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

＆＃13;
＆＃13; 
@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;
  }
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题