OC For any Anki users bewildered as to why their cards' CSS animations have suddenly stopped working...

Nominel, 7 months ago

What exactly does the Reduce Motion option do?

As far as I can tell, it disables some animations in the UI (including CSS animations).

Nominel, 7 months ago

Wait you can use CSS animations in anki?

Could you share an example of a card template you have that uses CSS animations

Here's an example of the card for the Morse code letter R (short, long, short):

HTML

<center><div class='border'><div class='flasher'
style='-webkit-animation: Morse{{Character}} 4s linear 1s infinite;'>
</div></div></center>

The {{Character}} part gets replaced by the letter R when this card is shown, so it ends up referring to the animation called MorseR.

CSS (excerpt, just showing the animation for R)

.border {
 background:black; 
 width: 100px;
 height:100px;
 padding: 5%;
 margin-left: auto;
 margin-right: auto;
}

.flasher {
width:100%;
height:100%; 
/**background: black;*/
-moz-border-radius: 15px;
border-radius: 15px;
}

@-webkit-keyframes MorseR{0%{background:black;}
1%{background:yellow;}
3%{background:yellow;}
5%{background:black;}
7%{background:black;}
9%{background:yellow;}
19%{background:yellow;}
21%{background:black;}
23%{background:black;}
25%{background:yellow;}
27%{background:yellow;}
29%{background: black;}
100%{background:black;}
}

(The real CSS has 26 keyframes sections, one for each letter from A-Z.)

Basically, the .border div is a black square, and the .flasher div is a rounded square in the center of the .border (looking like this). The animation changes the colour of the .flasher from black to yellow, making a flashing sequence.

You can also check out the code directly by downloading https://ankiweb.net/shared/info/3645353967.