CSS animation: End state after vertical text scrolls

user_379123 0
Viewed 89

I've created a CSS animated headline with a lead word and three vertically-scrolled/faded statements to complete the sentence, similar to what's being used on careers.google.com. The animation cycles three times and stops, with the third statement having scrolled/faded from view. I would like the end state of the animation to keep that statement in place without animating. I'm not sure how to go about this still after having looked around for ideas. The animation can be viewed at https://jsfiddle.net/rv9n07ad/2/. Also, my CSS might be more verbose than is necessary? Thanks in advance for any assistance. --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>

css-animations css html
2 Answers
  1. Stop fadeOutUpThree at 92% so text stays in place
  2. Set animation-iteration-count: 1 so it doesn't repeat

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

user_34109890

If you want to pause the animation at last state just use animation-fill-mode:forwards;. I made something which looks similar to that of link of google website.

This will work

* {
  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>

user_142252990
Related