CSS animation: Final position once the vertical text has finished scrolling

I have designed a CSS-animated headline with a leading word and three vertically-scrolling/fading statements to complete the sentence, inspired by the style used on careers.google.com. The animation runs through three cycles and stops, leaving the third statement scrolled out of view. I am trying to find a way for the animation to stop with the final statement remaining in place without any further movement. Despite searching for solutions, I am still unsure how to achieve this. You can see the animation in action at https://jsfiddle.net/rv9n07ad/2/. Moreover, I feel like my CSS code may be more extensive than necessary. Thank you in advance for any help. --cg

#scrolltext {
  width: 70%;
  overflow: hidden;
  background: #eceeef;
  position: relative;
  height: 150px;
}

.head-static, .head-scroll {
  font-family:Arial;
}

.head-static {
  display:block;
  margin-bottom: 1rem;
  font-size: 72px;
  line-height: 72px;
}

.head-scroll {
  font-size: 36px;
  font-weight: bold;
  line-height: 40px;
  animation-duration: 15s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 3;
  position: absolute;
  top: 0;
}

.head-scroll.one { 
  animation-name: fadeOutUpOne;
}

.head-scroll.two {
  animation-name: fadeOutUpTwo;
}

.head-scroll.three {
  animation-name: fadeOutUpThree;
}

@keyframes fadeOutUpOne {
  0% {
    opacity: 1; 
  }
  28% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  30% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOutUpTwo {
  0% {
    opacity: 0; 
  }
  31% {
    opacity: 0;
  }
  32% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  } 
  62% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0,-100%, 0);
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOutUpThree {
  0% {
    opacity: 0; 
  }
  63% {
    opacity: 0;
  }
  64% {
    opacity: 1;
  }
  92% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  94% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 0;
  }
}
<h1>
  <span class="head-static">Together</span>
  <div id="scrolltext">
    <span class="head-scroll one">we consectetur adipiscing elit sed do eiusmod tempor</span>
    <span class="head-scroll two">we ullamco laboris nisi ut aliquip ex ea commodo</span>
    <span class="head-scroll three">we sint occaecat cupidatat non proident</span>
  </div>
</h1>

htmlcsscss-animations

Answer №1

  1. Pause fadeOutUpThree animation at 92% to maintain text position
  2. Adjust animation-iteration-count: 1 to prevent looping

#scrolltext {
  width: 70%;
  overflow: hidden;
  background: #eceeef;
  position: relative;
  height: 150px;
}

.head-static, .head-scroll {
  font-family:Arial;
}

.head-static {
  display:block;
  margin-bottom: 1rem;
  font-size: 72px;
  line-height: 72px;
}

.head-scroll {
  font-size: 36px;
  font-weight: bold;
  line-height: 40px;
  animation-duration: 15s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  position: absolute;
  top: 0;
}

.head-scroll.one {
  animation-name: fadeOutUpOne;
}

.head-scroll.two {
  animation-name: fadeOutUpTwo;
}

.head-scroll.three {
  animation-name: fadeOutUpThree;
}

@keyframes fadeOutUpOne {
  0% {
    opacity: 1;
  }
  28% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  30% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOutUpTwo {
  0% {
    opacity: 0;
  }
  31% {
    opacity: 0;
  }
  32% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  62% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOutUpThree {
  0% {
    opacity: 0;
  }
  63% {
    opacity: 0;
  }
  64% {
    opacity: 1;
  }
  92% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
<h1>
  <span class="head-static">Together</span>
  <div id="scrolltext">
    <span class="head-scroll one">we consectetur adipiscing elit sed do eiusmod tempor</span>
    <span class="head-scroll two">we ullamco laboris nisi ut aliquip ex ea commodo</span>
    <span class="head-scroll three">we sint occaecat cupidatat non proident</span>
  </div>
</h1>

Answer №2

If you'd like to pause the animation at its final state, simply add animation-fill-mode:forwards;. I created something that resembles the design of Google's website link.

Here's how it will function

* {
  margin: 0px;
  padding: 0px;
  font-family: 'arial';
}

.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.rotating_text_pane {
  display: flex;
  flex-direction: column;
  height: 115px;
  overflow: hidden;
}

.change_pane {
  transform-origin: 0% 0%;
  animation: change_text 10s 1 forwards;
  display: flex;
  flex-direction: column;
}

@keyframes change_text {
  0%,
  43% {
    transform: translateY(0);
  }
  50%,
  93% {
    transform: translateY(-33%);
  }
  100% {
    transform: translateY(-66%);
  }
}

h1 {
  font-size: 100px;
}
<div class="container">
  <div class="rotating_text_pane">
    <div class="change_pane">
      <h1 style="color: red">Create</h1>
      <h1 style="color: #005DFF">Build</h1>
      <h1 style="color: #00B84E">Design</h1>
    </div>
  </div>
  <h1 style="margin-top: -20px;">for everyone</h1>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Python HTMLParser: Extracting HTML tag content made easy!

After working through an HTML page, I have now reached a point where I have lines that look like this: <td class="border">AAA</td><td class="border">BBB</td> I am trying to extract AAA and BBB into variables using HTMLParser, but ...

pythonhtml

Adding an id to a ul tag using JavaScript

I am trying to dynamically add an ID called "myMenu" using JavaScript to a ul element for a search filter. Unfortunately, I am unable to directly access the ul tag to change it, so I need to do it via JavaScript. As I am new to JavaScript, I am looking t ...

javascripthtmljquerycss

What could be causing the malfunction of my Superfish menu in Firefox?

I am currently experimenting with the Superfish jQuery plugin to improve a drop-down menu on my website. Unfortunately, in Firefox browser (v. 21.0), the drop-down menu does not open when hovering over it as expected. However, it works fine in Chrome and O ...

javascripthtmlcsssasssuperfish

Utilize Javascript to input text into a webform

I am working on creating a bot that simulates user input for the WattsApp web website. When I manually type a message into the website, it enables a button that allows me to send the message. However, when my script runs, it finds the input box, changes t ...

javascripthtml

The right column in a relatively positioned layout descends as an element in the left column is revealed

Currently in the process of constructing a registration form for our website, everything is going smoothly with one minor hiccup. The form consists of two columns where users enter their information. Initially, when designing elements for the first (left) ...

jqueryhtmlcsspositionmultiple-columns

top margin is functioning properly in Internet Explorer, but not in Google Chrome

margin-top is behaving differently in IE compared to Google Chrome. Two menus are supposed to be displayed one above the other in my design. The issue lies in the line margin-top:30%; within .anothermenu ul. In Chrome, the second menu appears above the f ...

javascriptjqueryhtmlcss

Seeking Up/Down Arrows HTML numerical input feature specifically designed for iOS devices

I am having an issue with a number input box on iOS. I am utilizing jquery, kendo mobile, and HTML5 for this particular task. While the number input displays up and down arrows in the Icenium simulator, they are not showing on the iPad. I am seeking a sol ...

ioscsshtmlinputkendo-mobile

Listen for the chosen choice

What is the best way to display a chosen option in PHP? I have set up an HTML menu list with options for "Buy" and "Sell". I need to output 'I want to buy the book' if someone selects "buy", or 'I want to sell the book' if someone pick ...

phphtml

Height and Width Dilemma in Visuals

Can you help with changing image resolution using jQuery? I have a background image applied to the body using CSS/PHP. My goal is to make the image fill the entire window by applying the screen height and width, without using repeat style. The code I am c ...

phpjavascriptjqueryhtmlcss

Tips for adjusting the size of a background image using zoom

Currently, I am in the process of creating my first website. At this stage, it consists of a background image, an image, and a non-functional password input section. Everything seems to be going well so far. The background image fits perfectly on the scree ...

htmlcsszoomingbackground-image

The media query fails to start in the browser's mobile display

Instead of just adjusting the browser window size, I utilized Chrome's developer tools to make adjustments. I double-checked that the appropriate meta tags were included in the code: <meta name="viewport" content="width=device-width, initial-scal ...

cssmobilemedia-queries

Can you provide guidance on aligning text in a text area to the center?

I've been trying to align my "field labels" in the center of their respective text fields without much success so far. To achieve this, I resorted to using tables but that didn't quite do the trick. Currently, I'm experimenting with CSS prop ...

cssformshtml-tablealignmentvertical-alignment

Enhance your website with a stylish CSS jQuery menu that lets you toggle, slide

If you're curious about the code, take a look here! Here are some of the issues I'm facing: The div doesn't toggle to hide when clicked on itself, only when another one is clicked. (UPDATE: it actually won't toggle at all) When t ...

jqueryhtmlcssipad

The sticky element should only be active when the visible section is overflowing vertically. There should be no scrollbar if the height is minimal

I'm currently working on a Whatsapp-style navigation bar and facing an issue with the sticky navbar functionality. https://i.stack.imgur.com/Cy3lA.gif Please refer to the details below for more information. To resolve this issue, I have included ...

javascripthtmlcss

What is the method for ensuring that the delete functionality is displayed within the same row?

In my division, there are options for names and deletion. It is displayed on my website as: 1.jpg delete The HTML code for the division is: <div id="files1" class="files"> <b class='dataname' >1.jpg</b> <span cla ...

javascriptjqueryhtmlcss

Unique Tags and Javascript: A customized approach

In the process of developing a web application, I am aiming for high standardization. To achieve this goal, I plan to utilize custom namespace tags that will be modified by JavaScript based on their functionality. For instance: <script type="text/java ...

javascripthtmlxml-namespaces

Problem with onblur and onchange events not being triggered in input tag

After encountering this issue, I came to the realization that the events onblur and onchange function properly. However, I noticed that if your page contains only ONE <input type="text" onblur="loadXMLDoc()"> Change Content</input> The behav ...

javascriptajaxhtml

Steps to Safely Transmit the Password through Ajax() Function in jQuery

I have implemented a Password textbox that starts with an empty value. When the user clicks on it and enters a password, the password will be updated in the database upon leaving the textbox (onblur event). I have successfully achieved this using ajax(). H ...

phpjqueryhtmlajaxsecurity

Is there a way to customize the animation for a button in material UI?

Trying to implement material UI in React and looking for a button that does not have the standard wave animation effect upon clicking, which you can see demonstrated here. Instead, I am searching for an animation that instantly fills the entire button wit ...

javascriptcssreactjsmaterial-ui

How to modify the background color within the mat-menu-panel

Incorporating angular 9 and less into my current project, I have encountered an issue with a mat-menu-panel where my mat-menu-item is located. While I have successfully changed the color of my mat-menu-item, I am now faced with the challenge of changing th ...

cssangulartypescriptless