Why isn't this fade-out style working?

0 votes
asked Mar 12 by zerio920 (720 points)

I made this fade-in style based on Harlowe's:

@-webkit-keyframes fade-in {
	0% {opacity: 0},
	to
	100% {opacity: 1}
}
@keyframes fade-in {
	0% {opacity: 0},
	to
	100% {opacity: 1}
}
.fade-in {
	text-decoration: none;
	animation: fade-in 1s ease;
	-webkit-animation: fade-in 1s ease;
}

This works fine in the passage:

@@.fade-in;Fade in this@@

So I tried making a fade-out style, for words/sentences I want the player to see just for a brief moment:

@-webkit-keyframes fade-out {
	0% {opacity: 1},
	to
	100% {opacity: 0}
}
@keyframes fade-out {
	0% {opacity: 1},
	to
	100% {opacity: 0}
}
.fade-out {
	text-decoration: none;
	animation: fade-out 1s ease;
	-webkit-animation: fade-out 1s ease;
}

However, this doesn't fade the text out:

@@.fade-out;Fade this out@@

Anyone have any ideas as to why this isn't working?

1 Answer

0 votes
answered Mar 12 by idling (10,470 points)
selected Mar 13 by zerio920
 
Best answer

css animation don't affect an element after the animation has run through, which means after your fade-out the letters jump back to their visible state immediately. To keep their change use the animation-fill-mode property:

@-webkit-keyframes fade-out {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes fade-out {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
.fade-out {
	text-decoration: none;
	animation: fade-out 1s ease;
	-webkit-animation: fade-out 1s ease;
  	animation-fill-mode: forwards;
}

The above css works for me.

commented Mar 12 by TheMadExile (44,270 points)
To add a bit of extra detail to idling's answer.  CSS supports two kinds of animations: transitions and keyframe animations.

The former allows animation of transitions between two states--e.g. transparent to opaque.

The latter is more versatile, but is chiefly built to handle repeating animations, so it resets after each iteration by default.  As shown by idling, you may override that behavior, so it can be used for transitions.
...