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

Is it possible to extract user-defined keywords from the URL?

Is it possible to implement dynamic functionality like this using PHP on my website (www.mywebsite.com)? If a user types www.mywebsite.com/banana into the URL bar, can my website take the keyword "banana" as input and search for it in a database table? ...

htmlformsurl

Getting HTML from Next.js middleware - a step-by-step guide

Is there a way to send the HTTP Status Code 410 (gone) together with a customized HTML message? I want to display the following content: <h1>Error 410</h1> <h2>Permanently deleted or Gone</h2> <p>This page is not foun ...

javascripthtmlnext.js

Revamping HTML Label 'for' with JavaScript: Unveiling Effective Techniques

I'm facing an issue with changing the target of a label that is associated with a checkbox using JavaScript. Here's the code I have: <input type="checkbox" id="greatId" name="greatId"> <label id="checkLabel" for="greatId">Check Box&l ...

javascripthtmllabel

Having trouble sending an array from Flask to a JavaScript function

As a newcomer to web development and JavaScript, I'm struggling to pass an array from a Flask function into a JavaScript function. Here's what my JS function looks like: function up(deptcity) { console.log('hi'); $.aja ...

javascriptpythonhtmlajaxflask

Problems with spacing in Slick slider and lazyYT integration

Utilizing lazyYT helps to enhance the loading speed of YouTube videos. Once loaded, these lazyYT videos are then placed within a slick slider. However, an issue arises where the videos stick together without any margin between them. To address this problem ...

javascriptjqueryhtmlcssslider

What is the process for converting an <input type="file> into a base64 string?

Currently, I'm attempting to send an image to my express backend by including the image directly in the post request body. var imgValue = document.getElementById("image").value; Within my post request: body : JSON.stringify({ image:imgValue ...

javascripthtmlnode.jsexpressfile

Display the elements of a div at a reduced size of 25% from its original dimensions

I'm currently developing a JavaScript-based iOS simulator that allows users to view their created content on an iPhone and iPad. This involves using AJAX to load the content/page into the simulator, but one issue is that the simulator isn't life- ...

javascripthtmlioscssios-simulator

Utilizing WebElement.findElements() in Selenium to refine search outcomes

After iterating through a list of WebElements, which I refer to as 'graphs', and finding descendants within each graph, I am encountering an issue where similar descendants from different graphs are being included in the results. Currently, I am ...

cssselenium

I'm looking to divide the background horizontally into two sections, with one side being a solid black color and the other side incorporating a gradient of two colors, such as purple transitioning into pink

body { height:100%; background: linear-gradient(top, #d808a4 50%, black 50%); background: linear-gradient(top, #d808a4 50%,black 50%); background: linear-gradient(to bottom, #d808a4 50%,black 50%); height: 229vh; } I am trying to creat ...

htmlcsssplitcolorsgradient

Using Bootstrap classes within a specified class declaration

Can you nest style classes within a single class? For example: .my-upper-class{ .hidden-md, .hidden-sm, .hidden-lg} ...

css

Adding padding to the navbar when collapsed causes extra space between the brand name and the hamburger icon button in Bootstrap

I am in the process of creating a fixed-top navigation bar for my webpage. However, I have encountered an issue where there is excessive space between the "Brand" name and the collapsed menu icon when viewed on smaller screens. Here is a visual representa ...

htmlcsstwitter-bootstrapnavbar

What could be the reason for my Bootstrap popover malfunctioning?

I've been attempting to incorporate the Bootstrap popover into my project. I copied the code exactly from the example provided on the website, but unfortunately, it doesn't seem to be functioning properly on my site. Below is the full code snippe ...

javascripthtmlcsstwitter-bootstrappopover

Enable CDATA support in ActionView::Base.full_sanitizer

One method I found helpful was using the ActionView::Base.full_sanitizer.sanitize(value) to remove HTML content. It generally works well, but there is an issue when the value passed into the method is wrapped in <![CDATA[ and ]]> because it returns a ...

htmlruby-on-railsrubycdata

Aligning Elements in the CSS Bootstrap Grid

Struggling to achieve perfect center alignment of an HTML element using the Bootstrap grid framework. Here's the current code: <div id="rentals" class="container pb-4"> <div class="row pt-5 mt-5 mb-4"> ...

htmlcssbootstrap-4grid

Tips for validating multiple forms on a single page without altering the JavaScript validation structure

My JSP page currently consists of two forms: <body> <form id="1"></form> <form id="2"></form> </body> Only one form is visible at a time when the page is viewed. A JavaScript validation file is used to check the ...

javascriptjqueryhtmlformsjsp

Controller for Ionic 3 styles and loading animations

What is the best way to eliminate these white spaces in our fullscreen mode? View the image here removeWhiteSpace() { let space = document.getElementById('white-space'); if (space) { space.style.display = 'none'; ...

cssionic-frameworkionic2ionic3

- Lorem ipsum dolor sit amet, consectetur adipiscing elit

I am looking to create a list with lower-roman indexes that are enclosed in parentheses (ii), where the content of each item is indented. Here is an example: (i) lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut metus nec urna ...

htmlcsshtml-lists

What is a way to create a colored <hr> element without increasing its height at all?

I'm facing a dilemma - I created an hr element and it's currently grey, but I want to change the color to black. The issue is that when I do this, it appears thicker and ruins the overall styling of my page. Does anyone have any ideas on how I ca ...

htmlcssgoogle-chrometags

Transferring multiple parameters between components using Navigate and ParamMap

My concern is that I'm unsure of how to pass multiple parameters through the component's route. I need to send two attributes. Is there a specific syntax required in defining the route? Below is my desired functionality for passing the attribut ...

htmlangular

Implement a transition effect for when elements change size using the `.resizable().css` method

I attempted to incorporate a deceleration effect when resizing an element back to its original size using the resizable method. The slowdown effect should only trigger during the click event (when the "Click-me" button is pressed), not while manipulating ...

javascripthtmljquerycss