How can I create CSS animations in Twine?

How can I create CSS animations in Twine?

You can create CSS animations in Twine by adding custom CSS to your story. Use the 'Stylesheet' section to define your animations.

Can you give me an example of a simple animation?

Sure! Here's a simple fade-in animation:

.fade-in {
  animation: fadeIn 2s;
}

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

You can apply the class 'fade-in' to any element in your Twine story.

How do I apply this animation to a text passage?

You can apply the animation by adding the class to your text passage like this:

<span class='fade-in'>This text will fade in!</span>

What if I want to create a looping animation?

For a looping animation, you can set the 'animation-iteration-count' property to 'infinite'. Here's an example:

.bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}