I recently installed the latest version of Anki. Suddenly, the CSS animations in some of my cards stopped working, e.g. https://ankiweb.net/shared/info/3645353967, which shows a flashing light to represent Morse code.

I did some digging around and discovered that the animation CSS styles used by the card were being overridden by something, so that the style ended up disabled in the final computed CSS. But if I added !important at the end of the style, it would suddenly work again. Super weird.

It turns out that the “Reduce motion” checkbox had been checked in the main settings menu - for some reason Anki didn’t conserve my settings when I updated. Unchecking this option solved the problem.

I hope this helps!

  • Nominel@kbin.socialOP
    1·
    1 year 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@kbin.socialOP
    1·
    1 year 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><div>
</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.