MyBB Community Forums

This is just a little CSS thing I use on one of my forum, to have a small animation when there are new posts in a forum.
All is in global.css

Start of the file

@-webkit-keyframes rotation {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

class forum_on

.forum_on {
    color: #0094d1;
    opacity: 1;
    -webkit-animation: rotation 2s infinite linear;
}

Nota: I use a fontawesome icon in my forumbit_depth2_forum but it works with pictures too. Didn't test with sprite.

It would be nice to attach a preview of the end result.

Nonetheless, thanks for your contribution.

Here you are:

You can see it in action @ https://forum.raspfr.org

Yeah, seems nice.

how about this is it looking good ?


ringing like alert bell , by the way thanks for tutotial , it create new ideas

The ringing bell is more complex (for css):

@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }
  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

.forum_on {
    color: #0094d1;
    opacity: 1;
    -webkit-animation: ring 4s .7s ease-in-out infinite;
}

Thank you

(2020-08-11, 12:47 PM)Crazycat Wrote: [ -> ]This is just a little CSS thing I use on one of my forum, to have a small animation when there are new posts in a forum.
All is in global.css

Start of the file

@-webkit-keyframes rotation {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

class forum_on

.forum_on {
    color: #0094d1;
    opacity: 1;
    -webkit-animation: rotation 2s infinite linear;
}

Nota: I use a fontawesome icon in my forumbit_depth2_forum but it works with pictures too. Didn't test with sprite.

Does not working for me 

(2021-03-04, 03:21 PM)A_Joycel Wrote: [ -> ]Does not working for me 

Without any url where I can see the trouble, I can only answer "working for me".

+1. Thank You.
I will try in my forum