Learn how to make your avatar rotate smoothly in CodyChat using CSS keyframes.

A complete guide with ready-to-use CSS code for rotating and heartbeat animation effects.
If you want to make your CodyChat avatar more attractive and animated, a smooth rotating animation is a perfect way to upgrade your chatroom design. CodyChat supports custom CSS, which makes it easy to apply animation effects to any element — including user avatars.

This guide will help you add a rotating avatar animation and a heartbeat effect using simple CSS code.

---

Why Add Avatar Animation?

Animated UI elements make your chatroom feel modern, professional, and interactive. A rotating avatar gives users a premium feel and helps important profiles stand out in the chat list.

---

Add This Code to css/custom.css

Copy and paste the following CSS code directly into your css/custom.css file:

@keyframes rotate-center {
  0% { -webkit-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

.acav, .avatar_private, .avav, .chat_avatar {
  -webkit-animation: rotate-center .6s ease-in-out both;
  animation: rotate-center .6s ease-in-out both;
}

.orti {
  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
  animation: heartbeat 1.5s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
  from { -webkit-transform: scale(1); transform: scale(1); }
  10% { -webkit-transform: scale(.91); transform: scale(.91); }
  17% { -webkit-transform: scale(.98); transform: scale(.98); }
  33% { -webkit-transform: scale(.87); transform: scale(.87); }
  45% { -webkit-transform: scale(1); transform: scale(1); }
}

---

What This Code Does

• rotate-center rotates the avatar from 0° to 360°.

• The classes .acav, .avatar_private, .avav, .chat_avatar automatically apply the rotate animation to all chat avatars.

• The .orti class creates a heartbeat (pulse) effect for special icons or avatars.

---

Where to Paste the Code

Go to:

css/custom.css
Paste the code at the top or bottom of the file and save it.
After refreshing your chatroom, your avatars will start rotating automatically.

---

How to Use the Heartbeat Effect

To apply the heartbeat animation to any avatar or icon, simply add the class:

class="orti"

This makes the element pulse gently, giving it a spotlight effect.

---

Conclusion

With just a few lines of CSS, you can completely transform the appearance of your CodyChat avatars. Whether you choose the rotation effect, heartbeat animation, or both, these simple adjustments will give your chatroom a modern and eye-catching look.

If you need more CodyChat CSS tricks, animations, or UI customization guides — just tell me!

Hi!
I’m using CodyChat and I’d like to display a rotating greeting text in the top bar of the chat (for example: “Good morning”, “Welcome”, etc.) together with the current DJ name.

The idea is that the text changes automatically (loop/rotate), preferably CSS-only if possible, without modifying the core HTML or using JavaScript.

Is something like this achievable in CodyChat, and do you have a CSS trick or workaround for it?

can you show me where you want that text (screenshot). you want that text in main chat or userlist. also you want only for dj aur for all members.

9 hours ago, kiiNg said:

can you show me where you want that text (screenshot). you want that text in main chat or userlist. also you want only for dj aur for all members.

you need to add some html code and then css using murqee tag in control/element/top folder

50 minutes ago, kiiNg said:

you need to add some html code and then css using murqee tag in control/element/top folder

can it be a little clearer, which code?

On 1/26/2026 at 9:12 PM, DraganSM said:

can it be a little clearer, which code?

there is two way to add message or text in header.
1st is via addons. (create or buy a addons and add that text or change from admin panel).
and
2nd is via html and css to add text and then style with css. its pure and clean. and it will be the part of codychat code.

you can add this code in your control/chat.php file.

<div style="width:100%; background:#111; color:#fff; padding:8px 0; overflow:hidden;">
    <marquee direction="left" scrollamount="4">
        CodyChat community gives you the opportunity of making new friends and sharing fun moments with other people..
    </marquee>
</div>

if you want some modern + smooth.

<style>.cody-marquee {
    width: 100%;
    background: #111;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
}

.cody-marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-rtl 15s linear infinite;
}

@keyframes scroll-rtl {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
</style>

<div class="cody-marquee">
    <span>
        CodyChat community gives you the opportunity of making new friends and sharing fun moments with other people..
    </span>
</div>

want to change Speed?

animation: scroll-rtl 8s linear infinite; /* fast */animation: scroll-rtl 20s linear infinite; /* slow */

On 1/28/2026 at 3:19 PM, kiiNg said:

if you want some modern + smooth.

<style>.cody-marquee {
    width: 100%;
    background: #111;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
}

.cody-marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-rtl 15s linear infinite;
}

@keyframes scroll-rtl {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
</style>

<div class="cody-marquee">
    <span>
        CodyChat community gives you the opportunity of making new friends and sharing fun moments with other people..
    </span></div>

want to change Speed?

animation: scroll-rtl 8s linear infinite; /* fast */animation: scroll-rtl 20s linear infinite; /* slow */

thank you