#css animation tutorial

How do I make the title at the top of the chapter flicker?

YAY an animation question :D

Preface: animations are great and fun to add to the ambiance of the project, BUT are not always accessibility-friendly. Try to consider this when starting a project (and include a toggle for animation, similar to the notification toggle here).

There are many many different ways to make a text flicker, it really depends what you mean by flickering:

SugarCube Add-On shaking the text

Greyelf had compiled a bunch of different text animation here, that you can find in Harlow. A handful makes the text flicker/move.

HiEv's glitchy code (can have subliminal messages)

HiEv's drunk code (less flickering, more blurry)

HiEv's blinking code (flickering, but not forever, can be made so)

And then, there are probably hundreds of codepens or the-like on the internet animating text to flicker (search "CSS flicker text" for a few results, here's one making it look like a neon sign!).

Note: whatever CSS/JS code you will find online that is not created specially for Twine will need to be tweaked. This has to do with the built-in CSS/JS code in the format used.

But, let's do a simple flickering animation as an example to talk about the base of CSS animation.

As always, the basic code can be found in my Paste-Bin (because Tumblr sucks).

CSS ANIMATIONS - The Basics

Animations created with CSS needs essentially two things: a '@ keyframes' (damn you Tumblr) and the 'animation' CSS rule. The first defines the way the animation will go, the second will link that animation to the relevant block and indicate other information (how long it lasts, whether it loops, whether there is a delay, etc...).

And for it to work, you'd need a container to target (like a span or a div) wrapping the text.

Keyframes

All keyframes are built in the same way:

@ keyframes animation-name { keyframes-selector {css-styles;} }

You will need to indicate :

a name. Here, let's take flicker.

a selector a.k.a the percentage of the animation duration where something changes. It can be done in percentage (0-100%, you can have whatever number you want) or with "from/to" (same as 0 and 100, any other stop needs to be in percentage). Here, let's have the flicker happen half-way through.

a css-rule which changes the style. It can be anything, from changing the colour, to the size, to its placement*. Here, flickering the text will mean changing the opacity.

So, for the example, we will get this:

@ keyframes flicker { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } }

*Note: some CSS animation (like placement or rotation or transform) will need for the target item to be displayed as a block or positioned in absolute. The more complex the animation, the more you will need to test and tweak.

Animation Rule

Now that we have an animation, let's link it to the targeted item. The animation CSS rule is a compiled version of 8 different rules (animation-[insert rule name]). the most important ones are the following:

animation: name duration iteration-count;

Here's what you need to define:

name [also animation-name]: the name of the keyframe animation. Here, we defined it as flicker.

duration [also animation-duration]: the duration of the whole animation. Let's make it 1 second here.

iteration-count [also animation-iteration-count]: how many times the animation goes. Since we would want it to flicker forever, let's make it infinite.

If you want to go further, you can also defined the following aspects:

timing-function [also animation-timing-function]: indicates the curve of the animation speed (slow start, slow end, etc...)

delay [also animation-delay]: delaying the start of an animation.

direction [also animation-direction]: whether an animation should be played forward, backward, or alternating.

fill-mode [also animation-fill-mode]: define whether an animation takes the styling in the start of the animation or the one at the end.

play-state [also animation-play-state]: define whether the animation is playing or paused.

Going back to out example, we have defined the animation rule as such:

animation: flicker 1s infinite;

In the meantime, I have wrapped my text in a div:

And included the css rule to my stylesheet:

.flickering { font-size: 50px; animation: flicker 1s infinite; }

Now to check if it works!

Yay!