Nominel

@Nominel@kbin.social

/kbin RTR#8 The update of kbin.social and plans for the near future

Today, we managed to update the main instance. Everything should slowly return to normal. Now it's time for things that will be less visible but no less important. Currently, the priority will be interactions with other instances - limiting spam, improving communication in the fediverse (including moderation) in order not to add...

/kbin logotype
Nominel,

That's really exciting! Thanks for all your work on the software and kbin.social.

Nominel,

Magical. Thanks for sharing this special moment with us.

Nominel,

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.

Nominel,

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,

Thanks for running this site, I really enjoy it :)

Nominel,

If you prefer co-op game modes over competitive ones, you might like the Mann vs Machine game mode! Because it has different difficulty settings available, it can be a relatively relaxed way to learn the game mechanics.

I hope you enjoy playing!

Nominel,

Amaura is indeed very cute!

My vote is for Snorlax. It just looks so huggable.

Nominel,

The Monami Olika is a great choice! It has a nice robust feeling to the plastic material. Do you like the grip?

Nominel, to anki

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

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,

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.

Nominel,

What exactly does the Reduce Motion option do?

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

  • All
  • Subscribed
  • Moderated
  • Favorites
  • โ€ข
  • JUstTest
  • tacticalgear
  • DreamBathrooms
  • InstantRegret
  • magazineikmin
  • Youngstown
  • everett
  • anitta
  • slotface
  • GTA5RPClips
  • rosin
  • thenastyranch
  • kavyap
  • mdbf
  • Leos
  • modclub
  • osvaldo12
  • Durango
  • khanakhh
  • provamag3
  • cisconetworking
  • ngwrru68w68
  • cubers
  • tester
  • ethstaker
  • megavids
  • normalnudes
  • lostlight
  • All magazines
    •