• 3 Posts
  • 6 Comments
Joined 1 year ago
cake
Cake day: June 22nd, 2023

help-circle

  • 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.