0 votes
asked by (530 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 by (19.4k points)
selected by
 
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 by (59.4k 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.
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...