Custom CSS With Animation does Not Work - Question | JoomShaper
Back to the questions

Custom CSS With Animation does Not Work

H

H

SP Page Builder 8 months ago

I made a simple text ticker with a raw html addon (see https://test.deijsmannetjes.nl/)

But I found out that to make it work, I was forced to include the animation CSS in a <style>-tag in the html content. When I moved the same css to the Custom CSS, the animation stopped working; the non-animation CSS functioned like it should. See e.g. this page: https://test.deijsmannetjes.nl/ijstaarten

Is this a bug? Or did I miss something?

0
5 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 8 months ago #184142

Hoi,

probably 2nd answer, missed something. Right now browser don't see whole needed CSS.

Paste your CSS code here: Page Settings > Page CSS > Custom CSS area. Without <style> </style> (!)

info_3238_2025.gif

0
H
H
Accepted Answer
8 months ago #184146

Hello Frank,

This worked! But why does it not work at the addon-level?

Btw: good that you pointed me to the page level custom css. I have another pge with nearly idential custom css in the addins. And now I could move it to the page level.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 8 months ago #184143

BTW Probably you missed to paste/use that part

 @keyframes scroll {
            0% {transform: translateX(100%);}
            100% {transform: translateX(-100%);}
        }

I also used probably the same HTML & CSS code and worked fine

info_3239_2025.gif

info_3240_2025.gif

you're welcome

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 8 months ago #184150

@keyframes

is specyfic tag, and may not work in addon Custom CSS. But the whole rest should.

It's better to keep all Custom CSS in one place, to be able to find it later, in the next weeks or months.

0
H
H
Accepted Answer
8 months ago #184151

The rest did work.

But now I put it on the page css.

I tried templates/shape_helixultimate/css/custom.css, but that did not work.

0