Is it not allow to create a custom animation?

Author Posts

1101blueli March 15, 2026 at 8:17 am

I have a a custom animation
.breakdance.scrolled–footer-shown .footer-cta-button {
animation: jump-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
Below code in Full Code Editor
@keyframes jump-in {
0% {
transform: translateY(-40px);
}

100% {
transform: translateY(0px);
}
}

But the editor would force the code to be changed
.breakdance.scrolled–footer-shown .footer-cta-button {
animation: cubic-bezier 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
https://ibb.co/JjpyTbb7
https://ibb.co/Y71b2q7y

If I move the animation code as 2nd group inside one selector
I will receive an error when saving
https://ibb.co/whHdXH0q

Is there a correct way to do it with MT?

Thank you

Sebastian March 16, 2026 at 2:40 pm

Hey Blue,

Thanks for reporting this, and sorry for the trouble.

It was due to a bug handling cubic-bezier animations, which I’ve fixed in Microthemer version 7.5.3.8.

You should be able to update via your dashboard shortly.

Cheers,
Sebastian

1101blueli April 13, 2026 at 10:19 am

Hello
Sorry for late reply. I was in holiday.

I found some other issue.
If I have animation like this, when editing the ‘animation’
e.g.
from animation: fadeInRight 0.4s ease forwards;
to animation: fadeInRight 0.4s ease;

It will show error. cannot be saved. I will have edit some other thing in order to force it re-save

.breakdance .bde-popup.main-menu-modal {
visibility: hidden;
opacity: 0;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.breakdance .bde-popup.main-menu-modal.breakdance-popup-open {
opacity: 1;
visibility: visible;
}
.breakdance .bde-popup.main-menu-modal.breakdance-popup-open .breakdance-popup {
visibility: visible;
opacity: 1;
animation: fadeInRight 0.4s ease forwards;
}
.breakdance .bde-popup.main-menu-modal.is-closing {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
z-index: var(–bde-z-index-popup) !important;
transition: opacity 0.4s ease forwards !important;
}
.breakdance .bde-popup.main-menu-modal.is-closing .breakdance-popup {
visibility: visible !important;
pointer-events: none !important;
animation: fadeOutLeft 0.4s ease forwards !important;
}

These are the code I have in the full code editor
:root {
–slide-distance: 30px;
}

@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(var(–slide-distance));
}

to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes fadeOutLeft {
from {
opacity: 1;
transform: translateX(0);
}

to {
opacity: 0;
transform: translateX(calc(-1 * var(–slide-distance)));
}
}

@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(calc(-1 * var(–slide-distance)));
}

to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes fadeOutRight {
from {
opacity: 1;
transform: translateX(0);
}

to {
opacity: 0;
transform: translateX(var(–slide-distance));
}
}

FYI
https://ibb.co/XfsmFBSb
Thank you

Sebastian April 15, 2026 at 9:30 pm

Hey Blue,

Thanks for reporting this. And apologies for the delay at my end, I was visiting a bereaved aunt on Monday and forgot to check back until today.

There was a bug, which may have been introduced when fixing the previous issue, where Microthemer converted:

animation: fadeInRight 0.4s ease forwards;

To:

animation: fadeInRight 0. forwards;

That’s invalid CSS and may have caused the error you saw. But maybe not, I didn’t see a specific error or issue saving like you mentioned. So please update to the latest version of Microthemer (7.5.3.9) and let me know if the issue still remains.

Cheers,
Sebastian

You must login or register to reply to this topic.