Help with text animation Fade-In position

HTML & CSS
1

The code animation I have works successfully with fade-in, but I need some guidance with positioning it.

The “t e s t 222” text fades-out successfully. And the “TEST333” text fades-in successfully, but, I’m trying to have “TEST333” text appear in the exact position where “t e s t 222” text faded-out. (But currently, in desktop view, TEST333 fades-in only on the same horizontal line as test222).

<div class="animate Roll" >
 <div class="animateFadeOut">
<span>t</span><span>e</span><span>s</span><span>t</span><span>111</span>
</div>
<p class="int">main text line</p>
<div class="animateFadeOut">
<span>t</span><span>e</span><span>s</span><span>t</span><span>222</span>
</div>
<div class="style fade-in"><p>Test333</p>
</div>
</div>
</div>

Here’s the fade-in css (for TEST333):

.fade-in {
  animation: fadeIn ease 25s;
  -webkit-animation: fadeIn ease 25s;
  -moz-animation: fadeIn ease 25s;
  -o-animation: fadeIn ease 25s;
  -ms-animation: fadeIn ease 25s;
}

@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

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

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

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

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

.style {
   margin: -25px 0px 0 0px;
   font-size: 20px;
   font-weight: 900;
  animation-delay: 10.5s;
  opacity: 0;
  text-align:center;
   color:#000000;
	 }
</style>

Any help with the positioning of TEST333, is appreciated.

(Additionally, the text “TEST333” disappears after a while, I’d like it to only disappear upon reload - any suggestion with that will be also appreciated).

2

If you want them to occupy the same space then one will have to be absolutely placed over the other one or at least moved by the appropriate distance so that they overlap.

e.g.

  <div class="animation-parent">
    <div class="animateFadeOut"> <span>t</span><span>e</span><span>s</span><span>t</span><span>222</span> </div>
    <div class="style fade-in">
      <p>Test333</p>
    </div>
  </div>

.animation-parent{position:relative; font-size: 20px;   color:#000000;}
.animation-parent p{margin:0;}
.fade-in {
  animation: fadeIn ease 5s 1.5s forwards;
  position:absolute;
  top:0;
  left:0;
}
.animateFadeOut {
  animation: fadeOut ease 5s 1.5s forwards;
}
.style {
   font-weight: 900;
   opacity: 0;
 }
  
@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@keyframes fadeOut{
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

You can get rid of all those animation prefixes as they do more harm than good and animation is supported by all modern browsers now.

1 Like
3

Many thanks for the great assistance.
I used your suggested code, and it positions the TEST333 perfectly, thanks,
but for some reason it seems to prevent
<div class="animateFadeOut">
from working. The test111 and test222 no longer fade-out.
Any idea/remedy on that is appreciated.

4

The snippet I posted is working fine with 2 texts fading in and out. Just copy it on to a page by itself to see it working.

The problem is likely to be some code we haven’t seen yet as the fade out code was missing from your example so I added one of my own.

You’ll need to post the full CsS and html to debug properly.

Just on my way out now but back later this evening. :slight_smile:

5

Sorry, got it.
your code was correct
Much thanks again.

If you be interested in providing guidance on how to make this:

<div class="style fade-in"><p>Test 333</p>

fade in like:
“TEST” first
and then
“333”

I would welcome and direction with that.
thanx again

1 Like
6

You can use the same animation but just add a delay

e.g.

.num{ animation: fadeIn ease 5s 4.5s forwards;opacity:0}

  <div class="style fade-in">
      <p>Test <b class="num">333</b></p>
    </div>
1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.