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

You must login or register to reply to this topic.