在 div 顶部停止关键帧动画？

Question

我在我的 404 页面上使用 this fun scrolling text effect，但我需要（短）文本在到达页面顶部后停止并保持可见，而不是一直向上滚动并离开.如何仅使用 CSS 来实现这一点？我想尽量少用js。

Answer 1

我稍微修改了代码库，但基本上你想删除 infinite iteration count from the slide animations and add in its place forward (which is a fill mode)。然后您想将动画中的 top 值替换为 top: 0%。最后，您想要移除 #titles:after 上的黑色渐变，这可以通过完全移除它或降低其不透明度来完成。仍然需要工作，但这是一般的想法（必须运行在 "Full page" 模式下）：

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

* { padding: 0; margin: 0; }

body, html
{
 width: 100%;
 height: 100%;
 font-family: "Droid Sans", arial, verdana, sans-serif;
 font-weight: 700;
 color: #ff6;
 background-color: #000;
 overflow: hidden;
}

p#start
{
 position: relative;
 width: 16em;
 font-size: 200%;
 font-weight: 400;
 margin: 20% auto;
 color: #4ee;
 opacity: 0;
 z-index: 1;
 -webkit-animation: intro 2s ease-out;
 -moz-animation: intro 2s ease-out;
 -ms-animation: intro 2s ease-out;
 -o-animation: intro 2s ease-out;
 animation: intro 2s ease-out;
}

@-webkit-keyframes intro {
 0% { opacity: 1; }
 90% { opacity: 1; }
 100% { opacity: 0; }
}

@-moz-keyframes intro {
 0% { opacity: 1; }
 90% { opacity: 1; }
 100% { opacity: 0; }
}

@-ms-keyframes intro {
 0% { opacity: 1; }
 90% { opacity: 1; }
 100% { opacity: 0; }
}

@-o-keyframes intro {
 0% { opacity: 1; }
 90% { opacity: 1; }
 100% { opacity: 0; }
}

@keyframes intro {
 0% { opacity: 1; }
 90% { opacity: 1; }
 100% { opacity: 0; }
}

h1
{
 position: absolute;
 width: 2.6em;
 left: 50%;
 top: 25%;
 font-size: 10em;
 text-align: center;
 margin-left: -1.3em;
 line-height: 0.8em;
 letter-spacing: -0.05em;
 color: #000;
 text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
 opacity: 0;
 z-index: 1;
 -webkit-animation: logo 5s ease-out 2.5s;
 -moz-animation: logo 5s ease-out 2.5s;
 -ms-animation: logo 5s ease-out 2.5s;
 -o-animation: logo 5s ease-out 2.5s;
 animation: logo 5s ease-out 2.5s;
}

h1 sub
{
 display: block;
 font-size: 0.3em;
 letter-spacing: 0;
 line-height: 0.8em;
}

@-webkit-keyframes logo {
 0% { -webkit-transform: scale(1); opacity: 1; }
 50% { opacity: 1; }
 100% { -webkit-transform: scale(0.1); opacity: 0; }
}

@-moz-keyframes logo {
 0% { -moz-transform: scale(1); opacity: 1; }
 50% { opacity: 1; }
 100% { -moz-transform: scale(0.1); opacity: 0; }
}

@-ms-keyframes logo {
 0% { -ms-transform: scale(1); opacity: 1; }
 50% { opacity: 1; }
 100% { -ms-transform: scale(0.1); opacity: 0; }
}

@-o-keyframes logo {
 0% { -o-transform: scale(1); opacity: 1; }
 50% { opacity: 1; }
 100% { -o-transform: scale(0.1); opacity: 0; }
}

@keyframes logo {
 0% { transform: scale(1); opacity: 1; }
 50% { opacity: 1; }
 100% { transform: scale(0.1); opacity: 0; }
}

/* the interesting 3D scrolling stuff */
#titles
{
 position: absolute;
 width: 18em;
 height: 10em;
 bottom: 0;
 left: 50%;
 margin-left: -9em;
 font-size: 350%;
 text-align: justify;
 overflow: hidden;
 -webkit-transform-origin: 50% 100%;
 -moz-transform-origin: 50% 100%;
 -ms-transform-origin: 50% 100%;
 -o-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-transform: perspective(300px) rotateX(25deg);
 -moz-transform: perspective(300px) rotateX(25deg);
 -ms-transform: perspective(300px) rotateX(25deg);
 -o-transform: perspective(300px) rotateX(25deg);
 transform: perspective(300px) rotateX(25deg);
}

#titles:after
{
 position: absolute;
 content: ' ';
 left: 0;
 right: 0;
 top: 0;
 bottom: 60%;
 background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
 background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
 background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
 background-image: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
 background-image: linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
 pointer-events: none;
}

#titles p
{
 text-align: justify;
 margin: 0.8em 0;
}

#titles p.center
{
 text-align: center;
}

#titles a
{
 color: #ff6;
 text-decoration: underline;
}

#titlecontent
{
 position: absolute;
 top: 100%;
  width: 100%;
 -webkit-animation: scroll 10s linear 4s forwards;
 -moz-animation: scroll 10s linear 4s forwards;
 -ms-animation: scroll 10s linear 4s forwards;
 -o-animation: scroll 10s linear 4s forwards;
 animation: scroll 10s linear 4s forwards;
}

/* animation */
@-webkit-keyframes scroll {
 0% { top: 100%; }
 100% { top: 0% }
}

@-moz-keyframes scroll {
 0% { top: 100%; }
 100% { top: 0% }
}

@-ms-keyframes scroll {
 0% { top: 100%; }
 100% { top: 0% }
}

@-o-keyframes scroll {
 0% { top: 100%; }
 100% { top: 0% }
}

@keyframes scroll {
 0% { top: 100%; }
 100% { top: 0% }
}

<p id="start">A short time ago in a browser very, very close&hellip;</p>

<h1>STAR WARS<sub>titles in CSS3</sub></h1>

<div id="titles"><div id="titlecontent">

 <p class="center">ERROR 404</p>
 
 <p class="center">Page not found</p>
</div></div>

在 div 顶部停止关键帧动画？

Stop keyframe animation at top of div?

css

keyframe

css-animations