Xenforo 2.1 Animation on xenforo

[Wolf Knight]

Hello guys,
Good day!

Dear, I am trying to modify the usernames CSS style with animation style as this code:

1. background: linear-gradient(to right, #66f, #09f, #0f0, #f39, #66f);
2. -webkit-background-clip: text;
3. background-clip: text;
4. color: transparent;
5. animation: style3 4s ease-in-out infinite;
6. background-size: 400% 100%;
7. font-weight: bold;

The colors were changed when I submitted this code without applying the animation.
May I know if there is any code I should add somewhere?
Many thanks.

 

[shqawe]

Where is the animation code which i think it's called style3?

I'm sure this link will help you for what you want.
https://www.w3schools.com/css/css3_animations.asp

 

[Wolf Knight]

Where is the animation code which i think it's called style3?

I'm sure this link will help you for what you want.
https://www.w3schools.com/css/css3_animations.asp

shqaweFirst, welcome my brother @shqawe here in ENXF; I missed you!
The code I attached is working on another forum, but when I use it on my platform, it's not working.
My question was: Is there any code I should add in PAGE_CONTAINER for example?

Thank you.

 

[shqawe]

Thanks bro i missed you too.

Regarding the code can you share the forum link to i can get animation code for you because you should to have keyframes code to animation work.

 

[Wolf Knight]

Thanks bro i missed you too.

Regarding the code can you share the forum link to i can get animation code for you because you should to have keyframes code to animation work.

shqaweThis is the site here
The CSS animation of Admin member.

 

[BattleKing]

This is the site here
The CSS animation of Admin member.

Wolf KnightWhat is not working?
Only one of this will be used, I guess it depends on the browser

• -webkit-background-clip: text;
• background-clip: text;

But it looks ok for me. So please describe what you would like to change

 

[Wolf Knight]

What is not working?
Only one of this will be used, I guess it depends on the browser

• -webkit-background-clip: text;
• background-clip: text;

But it looks ok for me. So please describe what you would like to change

BattleKingI used more than one browser, and nothing changed.
I think there is a keyframe code that I should add it.

 

[ridvanco1]

What is not working?
Only one of this will be used, I guess it depends on the browser

• -webkit-background-clip: text;
• background-clip: text;

But it looks ok for me. So please describe what you would like to change

BattleKingwhat is template name theme

 

[Wolf Knight]

what is template name theme

ridvanco1Extra.less

 

[shqawe]

Thanks bro i missed you too.

Regarding the code can you share the forum link to i can get animation code for you because you should to have keyframes code to animation work.

shqawe@Wolf Knight add this code before above css code and animation will work.

@keyframes style3 {

    0%,
    100% {
        background-position: 0 0
    }

    50% {
        background-position: 100% 0
    }
}

 

[Wolf Knight]

@Wolf Knight add this code before above css code and animation will work.

@keyframes style3 {

    0%,
    100% {
        background-position: 0 0
    }

    50% {
        background-position: 100% 0
    }
}

shqaweWorking 100%
Many thanks brother

 

[BattleKing]

Working 100%
Many thanks brother

Wolf KnightStupid question, what has been changed on the preview site, I still see the same results as before.
I know that the keyframe section is required of the animation-name, which has been used in the above example STYLE3

 

[Wolf Knight]

Stupid question, what has been changed on the preview site, I still see the same results as before.
I know that the keyframe section is required of the animation-name, which has been used in the above example STYLE3

BattleKingNothing changed; maybe you have not understood the question; I was looking for the complete code of the animation username style used here.
Shaqawi knew what I wanted, and he answered me.
Thank you for trying to help.

 

[BattleKing]

Nothing changed; maybe you have not understood the question; I was looking for the complete code of the animation username style used here.
Shaqawi knew what I wanted, and he answered me.
Thank you for trying to help.

Wolf KnightI know what you want, and I thougth this is your page that s why I was confused
🤣

 

[shqawe]

Working 100%
Many thanks brother

Wolf KnightYou are welcome bro 😘