0 votes
by (170 points)

Hey guys, I am using Twine 2 with Story Format as SugarCube v2.25. 

I have a certain CSS code, which I want to apply for every single passage in my story. I wish to simply have the text fade in and fade out for every passage in the story. I searched around the internet and found some solutions ( I am not sure, whether they are correct ). I used " #passage{ } " in my stylesheet, but it only applies the attributes for the Start paragraph, and all the other passages don't follow. Sorry for asking such a basic dumb question, but i could really appreciate some help here,...

#passages {
  	text-align: center;
  	font-family: "Trebuchet MS", Helvetica, sans-serif;
   	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
  }

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

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

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

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

( I tried this code just for fade in and works for <div> tag ).

 

Thanks a lot, guys...

1 Answer

0 votes
by (68.6k points)
edited by

Passages already include an incoming fade-in (opacity) transition, and a provision for a fade-out, so attempting to apply a separate key-frame animation isn't going to work well.  You're also using the wrong element, the #passages element is the container for passage elements not the elements themselves.  You want the .passage element.

You should either simply increase the duration of the existing transition to your desired length or remove it first.  Since you want an opacity fade-in, including a possible fade-out, I'd suggest simply using the existing transition system.

For example: (Writing this from my phone, and from memory, so caveat emptor.)

.passage { transition-duration: 2s; }

 

by (170 points)
Thanks a lot !
...