The Fade in Effect in CS using Style.css

Game Development ChoiceScript Help
1

For all those who ever wanted to add a fade effect to their games; Here you go, paste this in style.css in your mygame folder, make sure to paste it over the “body” paragraph at the beginning to get the desired effect:

Here’s how it should look:

body {
max-width: 680px;
font-family: Georgia,“Times New Roman”,serif;
font-size: 16px; /* reset, specified in px so IE currentStyle works */
background-color: #F7F4F1;
color: rgba(0, 0, 0, 0.85);
margin: 8px auto;
padding: 0 8px;
-webkit-user-select: text; /* selectable text for Chrome app support */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-moz-animation: fadein 3s; /* Firefox */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera */
animation: fadein 3s;
}

@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

}

Happy Coding!

2

Gonna try this out in a test project.

3

@cottage14 as I’ve been fiddling with it, that body paragraph only applies to the first scene in every scene file. Therefore if you wanted it on text and choices just paste this code;

-webkit-animation: fadein 3s; /* Safari and Chrome */
-moz-animation: fadein 3s; /* Firefox */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera */
animation: fadein 3s;
}

@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

}

in the #text paragraph and in the “choice label” paragraph.

A WARNING:

Don’t ever try putting this in the “stat bar> span, .statLine> span” it will screw your stat screen up. Pasting it in normal “stat bar” and opposed is fine though.

1 Like