Okay, rabbitears, so we've got a couple different things! I'm notoriously bad at explaining things, so I'll do my best, but if someone better at words than me wants to take a stab at translating this, by all means.

a) So right now, you have [ newclass=.spin]@keyframes[...][/ newclass] at the bottom of your code. This is only partly correct. Your @keyframes rotate needs to be handled like a class of it's own, not like color:red; or other CSS. So rather than the keyframes going inside spin's css, you'd want something that looks instead like:

[ newclass=.spin][/ newclass]
[ newclass=@keyframes rotate]100% {transform: rotate(1turn);}[/ newclass]

b) @keyframes ___ isn't like a normal class, though. It's essentially working as a variable: information you put in your code, but call for somewhere else in the code. How do we do this? You'll notice above, I didn't put anything in the CSS for your spin class. Now, we'll add CSS in to make the animation work, using animation CSS. It'll look like so:

[ newclass=.spin]animation: rotate 10s linear infinite;[/ newclass]

So what does any of this mean??? Animation is a CSS indicator, just like color tells your text what color to change to or margin tells the code... well, what the margins are supposed to be. Rotate, in this case, is the same word from @keyframes rotate - 'rotate' is the variable I mentioned before. This is how the animation knows how to animate. If you change 'rotate' to 'turn' in @keyframes rotate, you would also have to change 'rotate' to 'turn' in this CSS we've added here. 10s means 10 seconds - this is the duration of the animation. Linear is one of two options, which if you've done anything with hovers, you might recognize; 'linear' makes the movement of the animation even throughout, so the spinning stays consistent, but you can also replace it with the word 'ease' to see the other kind of movement transition. Finally, infinite will make it so that once the duration you specified before is up (10s, or 10 seconds, in this case), the animation will repeat infinitely. If you only want your class to spin once, you can just get rid of the word 'infinite'.

c) And finally... the worst part of it all. So Proboards newclasses are a little broken, and they don't support 100% of the things that regular HTML can. For some things that Proboards newclasses can't support, though - @keyframes being one of them - we can utilize a glitch in the Matrix to get working, anyway.

To explain how the glitch works, we can look at Proboards newclasses versus raw CSS:

.spin { css here! }
versus
[ newclass=.spin]css here![/ newclass]

Note that the newclass tags are essentially just replacing the {} brackets, plus a little bit of text. Everything inside the newclass tags is being read as raw CSS - meaning we can write raw CSS (and as much as we want of it) inside the newclass tags, so long we start with a class name and the last closing } in the CSS is replaced with closing [/ newclass] tag.

Sooooooooo, what that means is that what your code begins and ends as is... *drumrolls*

BEFORE: [newclass=.spin]@keyframes rotate {100% {transform: rotate(1turn);}}[/newclass]
AFTER: [newclass=.spin]animation: rotate 10s linear infinite; }@keyframes rotate {100% {transform: rotate(1turn);}[/newclass]

I hope that helped/made sense at all! Happy coding! ;u;/

rabbitears, oh shoot, oh heck, I missed the image bit.

THE FIRST QUESTION. So the reason the image is spinning is because the image is inside the class that's spinning. If you were to have text or another div inside the dashed spinning board div, they'd spin, too. The best way to fix this is technically to just... have nothing inside the spinning div that you don't want to be spinning. Doing so, you'd take the image out, put it somewhere else, and manually align it so that it's on top of the spinning circle/looks the way it does now.

If you don't want to mess with your HTML, though, you can also try this in your CSS, by adding:

[ newclass=.spin img]animation: rotate2 10s linear infinite; }@keyframes rotate2 {100% {transform: rotate(-360deg); }[/ newclass]

So basically, when you add an image to Proboards, you use this syntax, right? [ img src="URL" ] This is a sort of HTML tag that we can call, even without using a class name. By putting .spin img, we are telling the code to apply that styling (in this case, the animation) to any [ img ] tag inside the .spin class. The animation we're giving it is the mirror opposite of what the .spin class has. (Note that 360 degrees is one full turn clockwise, so -360deg means that it is making one full turn counterclockwise.) This means that the image will be spinning in the opposite direction of the div it's inside, effectively counter-acting it. THE PROBLEM... I haven't live tested this to see for sure, but there's a good chance that the image may appear a bit 'jerky'. This is why, despite having a more complicated write-up, the better option is to just... take the image out of the thing that's spinning.



THE SECOND QUESTION. You've got a couple things here I can see in your code that are probably causing the issue, but fortunately, they're very simple fixes!

The first is how you're writing your newclass. Very excited to see you using the glitch correctly, BUT, there's one thing to remember. [ newclass=.whatever] and [/ newclass] tags replace the first and last squiggly brackets in your CSS. For example, in your first class, you have:

[ newclass=".circle-wrapper"] { position: relative; width: 150px; height: 150px; float: left; margin: 10px;}[/ newclass]

But the { and } are unnecessary, because your newclass tags in front and back are effectively taking their place! In your second class, .circle, you only need to remove the opening { bracket, because if you read the CSS inside, the final closing } is already gone (and correctly so).

The second is that, in .circle, you have animation: spin 10s linear infinite; - but your keyframes are named 'rotate'. Remember that you need to call for the animation you want by using the name right behind '@keyframes'. In this case, you can either change your CSS to animation: rotate 10s linear infinite; OR change your keyframes to @keyframes spin, so that the name matches and it knows what to pull.

Hopefully this helps! ;u;b