Replace text element with fade animation using only HTML and CSS

Question

I'm trying to have a word like "hello" then when you click on it, it fades out and a new word fades in.

Is there any way to do this only using HTML and CSS? If not, I guess I'm going to have to learn javascript and/or jquery.

Answer 1

Using transition can solve your problem. This may help you.

By the way, learning JS could be a real asset for web dev ;)

Answer 2

Do You mean something like this?

<span>Hello</span> <span>World</span>
<style>
  span { transition: opacity 1s ease; }
  span + span,
  span:first-child:active { opacity: 0; } 
  span:first-child:active + span { opacity: 1; }
</style>

Updated according to comment:

<span>Hello</span> <span>World</span>
<style>
  span { transition: opacity 1s ease; position: absolute; top: 0; left: 0 }
  span + span,
  span:first-child:active { opacity: 0; } 
  span:first-child:active + span { opacity: 1; }
  span + span { pointer-events: none; }
</style>

https://codepen.io/Patu/pen/RwNZOoM

Answer 3

You can play with selector and html elements trying to achieve wat you want, this is what i made.

I used css pseudo-classes ( here you can find a list of pseudo-classes with relative explanation )

the pseudo-classes are used for detect special states of the elements, like the :hover ( i think the most used ) pseudo-class that detects when the mouse is hover an element.

in this case i used

• :focus: That selects the element that has the focus ( like when you click a link, in the moment that you click the link it get the focus same thing when you click and input, so if you click the input it gets the focus.)

• :visited: Is used for detect the visited links, unfortunatelly this selector has a special behaviour becouse it can be used for violate the user privacy, so you cannot correctly styles othe elements based on the links that has been visited ( that is what i tried to do here )

<a href="#" id="first">
hello
</a>



<a href="#" id="second">
hello
</a>

<style type="text/css">
#first{
  text-decoration: none;
  color: black;
  opacity: 1;
  outline: none;
  transition: opacity 1s;
}

#first:visited{
 opacity: 0;
}

#first:focus{
  opacity: 0;
}
#second:focus{
  outline:none
}
#second{
  opacity: 0;
  text-decoration: none;
  color: black;
  transition: opacity 1s;
}

#first:focus + #second{
  opacity: 1;
}

#first:visited ~ #second{
  opacity: 1;
}

</style>

Unfortunatelly as this when the user click another element the previous text comes back