CODEWITHSUNDEEP
htmlcsscss-transitions
user4392204
user4392204

Reputation:

How do I apply a fade effect to this text?

I have this simple HTML and CSS which swaps which span is visible when hovering over it.

I would like to add a fade effect to this, but I added transition: ease-in-out 1s; and nothing happened. Am I being really dumb?

div#text1 span#s1main {
  display: inline;
}

div#text1:hover span#s1main {
  display: none;
}

div#text1 span#s1morph {
  display: none;
}

div#text1:hover span#s1morph {
  display: inline;
}
<div id="text1">
  <span id="s1main">Hello World</span>
  <span id="s1morph">Secondary Text</span>
</div>

Thanks for any assistance.

Upvotes: 1

Views: 78

Answers (4)

Saa_keetin
Saa_keetin

Reputation: 655

Umm dispay none wouldnt work with transition, you might have to play with opacity and position of the element to get it working. 

div#text1 span#s1main {
  opacity:1;
  transition: 1s all;
}

div#text1:hover span#s1main {
  opacity:0;
}

div#text1 span#s1morph {
  position:absolute;
  left:0px;
  opacity:0;
  transition: 1s all;
}

div#text1:hover span#s1morph {
  opacity:1;
}

body{
  margin:0;
  }
<div id="text1">
  <span id="s1main">Hello World</span>
  <span id="s1morph">Secondary Text</span>
</div>

Upvotes: 0

Ted Whitehead
Ted Whitehead

Reputation: 1826

display can’t be transitioned https://www.w3.org/TR/css3-transitions/#animatable-css

You would need to toggle the opacity of the words instead. Here’s a demo:

#text1 span {
  display: inline-block;
  max-width: 100%;
}

/* Text 1 */
#text1 #s1main {
  transition: max-width 0s linear 250ms, visibility 0s linear 250ms, opacity 250ms ease-in-out;
}

/* Text 2 */
#text1 #s1morph {
  opacity: 0;
  max-width: 0;
  visibility: hidden;/* for screen readers */
  transition: max-width 0s linear 250ms, visibility 0s linear 250ms, opacity 250ms ease-in-out;
}

/* Text 1 Hover */
#text1:hover #s1main {
  opacity: 0;
  max-width: 0;
  visibility: hidden;/* for screen readers */
  transition: max-width 0s linear 250ms, visibility 0s linear 250ms, opacity 250ms ease-in-out;
}

/* Text 2 Hover */
#text1:hover #s1morph {
  max-width: 100%;
  opacity: 1;
  transition: max-width 0s linear 250ms, visibility 0s linear 250ms, opacity 250ms ease-in-out 250ms;
  visibility: visible;/* for screen readers */
}
<div id="text1">
  <span id="s1main">Hello World</span>
  <span id="s1morph">Secondary Text</span>
</div>

This demo uses multiple transitions and the transition-delay property to hide the words after the opacity transition has finished.

Upvotes: 1

Alejandro Li&#233;bana
Alejandro Li&#233;bana

Reputation: 300

You have to add the property that you want to transition. For example:

transition: width 250ms ease-in-out;

or you can apply to all:

transition: all 250ms ease-in-out;

http://www.w3schools.com/css/css3_transitions.asp

And as Chiller said display is not an animatable property and you must do it with opacity.

Upvotes: 2

Chiller
Chiller

Reputation: 9738

You can't use transition for the property display. you can use it for opacity 

div#text1 span#s1main {
  transition:opacity 1s;
  position:absolute;
  opacity:1;
}

div#text1:hover span#s1main {
   opacity:0;
}

div#text1 span#s1morph {
  transition:opacity 1s;
  position:absolute;
  opacity:0;
}

div#text1:hover span#s1morph {
   opacity:1;
}
<div id="text1">
  <span id="s1main">Hello World</span>
  <span id="s1morph">Secondary Text</span>
</div>

Upvotes: 0

Related Questions