Why isn't this fade-out style working?

Question

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?

Answer 1

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.

Comments

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.