Home / Questions / 235426
Accepted
zerokira
Asked: 2020-02-06 09:06:12 +0800 CST 2020-02-06 09:06:12 +0800 CST

How to change text with animation CSS Fade in

  • 772

I'm trying to change the texts with an animation but I still can't figure out how to do it. I have the following code:

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
	<p>Here is a sentence <span class="blink_me" id="rotate">default</span> is what changes</p>

	<ul style="display:none">
		<li>test1</li>
		<li>bob</li>
		<li>next</li>
		<li>last</li>
		<li>PABLO</li>
		<li>ANDRES</li>
	</ul>

The idea is that the elements of the label are displayed liand change something like this: FadeIn Animation but using onlyCSS

javascript

1 Answers

  1. Best Answer

    You can have two animations:

    • One to blink (which you already have created)
    • Another to change the text (to be created)

    Note: I had originally put a solution with ::before/ ::after, but it didn't finish animating well in some browsers. You can review that solution in history.

    You can have the text in several spaninside and then show/hide by changing its width from 0 to auto (having a overflow: hidden). So what you would do is calculate the times (you have 6 different words, if the animation lasts 100% of the time, each word should be 16.6%).

    Then the only thing left would be to adjust the timing of the animations so that the blinking coincides with the word change.

    Here you can see it working:

    .blink_me {
  display: inline-block;
  vertical-align: bottom;
  animation: blinker 1s linear infinite;
  animation-delay: -0.5s;
}

.blink_me span {
  float: left;
  overflow: hidden;
  animation: hideShow 6s linear infinite;
}

.blink_me span:nth-child(1) { animation-delay: -0s; }
.blink_me span:nth-child(2) { animation-delay: -1s; }
.blink_me span:nth-child(3) { animation-delay: -2s; }
.blink_me span:nth-child(4) { animation-delay: -3s; }
.blink_me span:nth-child(5) { animation-delay: -4s; }
.blink_me span:nth-child(6) { animation-delay: -5s; }

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
@keyframes hideShow {
  0%, 16.6%, 33.33%, 100% { width: 0; }
  16.66%, 33.3% { width: auto; }
}
    <p>
  Here is a sentence 
  <span class="blink_me" id="rotate">
    <span>test1</span>
    <span>bob</span>
    <span>next</span>
    <span>last</span>
    <span>PABLO</span>
    <span>ANDRES</span>
  </span> 
  is what changes
</p>

    • 5