Jump to content

How do I show text before an animation begins and then keep the final text visible after css animation ends?

Recommended Posts

Hello, experts. I'm a novice with CSS animations, and I'm trying to accomplish the following:

  1. The first sentence is visible when a user visits my site.
  2. That text vertically slides and the second sentence slides into place.
  3. Then that sentence slides away and the third and final sentence slides in and remains on the screen.

I can get the three items to animate just fine (see what I've got here: https://www.erincorradi.com/welcome); I just can't get the first sentence visible right away before the animation begins and the final sentence to remain after the animation ends. Thanks for your help!

I've inserted this in a code block into my Brine Family template:


    <div class="slidingVertical">
     <h1>

 <span>Welcome too the start of you’re new website, freind.</span>
     <span>Welcome to<font color="bf7d65"><s>o</s></font> the start of you<font color="bf7d65"><s>’re</s></font> new website, fr<font color="bf7d65"><s>ei</s></font>nd.</span>
<span><font color="bf7d65">Now for real: </font>Welcome to the start of your new website, friend.</span>
   </div>
 </h1>

Here's the css:


/*Vertical Sliding*/
.slidingVertical{
   display: inline;
   text-indent: 0px;
}
.slidingVertical span{
   animation: topToBottom 14.5s linear 1 0s;
   -ms-animation: topToBottom 14.5s linear 1 0s;
   -webkit-animation: topToBottom 14.5s linear 1 0s;
 animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
   opacity: 0;
   overflow: visible;
   position: absolute;

}
.slidingVertical span:nth-child(2){
   animation-delay: 3.5s;
   -ms-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
 animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}

.slidingVertical span:nth-child(3){
animation-delay: 7s;
   -ms-animation-delay: 7s;
   -webkit-animation-delay: 7s;
 animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
 animation-fill-mode: forwards !important;
   -ms-animation-fill-mode: forwards !important;
   -webkit-animation-fill-mode: forwards !important ;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
   0% { opacity: 0; }
   5% { opacity: 1; -moz-transform: translateY(-50px); }
   10% { opacity: 1; -moz-transform: translateY(0px); }
   25% { opacity: 1; -moz-transform: translateY(0px); }
   30% { opacity: 0; -moz-transform: translateY(50px); }
   80% { opacity: 0; }
   100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
   0% { opacity: 0; }
   5% { opacity: 0; -webkit-transform: translateY(-50px); }
   10% { opacity: 1; -webkit-transform: translateY(0px); }
   25% { opacity: 1; -webkit-transform: translateY(0px); }
   30% { opacity: 0; -webkit-transform: translateY(50px); }
   80% { opacity: 0; }
   100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
   0% { opacity: 0; }
   5% { opacity: 0; -ms-transform: translateY(-50px); }
   10% { opacity: 1; -ms-transform: translateY(0px); }
   25% { opacity: 1; -ms-transform: translateY(0px); }
   30% { opacity: 0; -ms-transform: translateY(50px); }
   80% { opacity: 0; }
   100% { opacity: 0; }
}


I love brainstorming, creating websites, and replacing incorrectly used hyphens with en dashes.

Link to comment
  • Replies 0
  • Views 547
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.