Add outside CSS to Sugarcube

FIF

I stumbled on https://daneden.github.io/animate.css/ CSS and his effects would be a HUGE help to making this gamebook more interesting to read. How would I integrate it into the story's CSS? I tried copy paste for a giant fail.

TheMadExile

From a two second look, I don't see any reason that wouldn't work when copy/pasted. I mean, unless you paste it at the very top of your Story Stylesheet its @charset rule will fail—because that's one of the at-rules which must come at the top—but that's hardly necessary here anyway.

Did you copy it out of your browser or did you download it and open it in something?

FIF

I downloaded it into notepad++. I bet that's the problem. Let me try copy paste

TheMadExile

By "I downloaded it into notepad++", I assume you mean you downloaded it and then opened it in Notepad++. Copying it from there and pasting it into your Story Stylesheet should work.

I asked mostly because I didn't know if you'd opened it in a word processor or something to that effect.

FIF

Didn't work. Copied directly from Github. @TheMadExile Integrating his stylesheet would add remendous value to your project.

Still no woring though.

@.tada;TADA@@ is the text in the passage

Here;s the css from the css stylesheet:

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  animation-name: tada;
}

Tada = Nada

TheMadExile

What you copied only defines the specific tada animation. Actually animating any of the animations requires the animation classes, which you apparently failed to copy. They're at the top of the file, but I'll replicate them here:

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

From there you place the desired classes on your element. You need, at a minimum, the animated class and the class of the animation you want, tada in this case. You may add others where they make sense—e.g. infinite.

For example:

@.animated.tada;TADA@@.animated.infinite.tada;TADA@@ is the text in the passage

PS: You also missed, or chose not to copy, the @-webkit-keyframes rule for the tada animation—it's just above the standard one. Without that WebKit prefixed version, in addition to the standard one, the animation will not work in older WebKit-based browsers—it goes just above the standard one, just like in the animate.css file.

PPS: It may help to read the basic usage instructions on its GitHub—from no. 2 onward.

FIF

Yes, sorry. I didn't copy everything in. It's a very long file. The syntax you provided was what I was missing. I was not adding the animation class. Thank you.