Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Trying to add keyframe animation to css style

Featured Lock Resolved Issue
Im trying to add a CSS Keyframe Animation with Delay Between Iterations

Ive added the following code to the css field

.btn-primary{
color: #000000;
background-color: #ffd012;
border-color: #ffd012;
width: 300px;
font-size: 20px;
animation: bounce 3.28s cubic-bezier(.36,.07,.19,.97) both;
animation-iteration-count: infinite;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 50px;
}

@keyframes bounce {
10%, 50% {
transform: translate3d(0, -1px, 0);
}

15%, 45% {
transform: translate3d(0, 2px, 0);
}

20%, 30%, 40% {
transform: translate3d(0, -2px, 0);
}

25%, 35% {
transform: translate3d(0, 3px, 0);
}
100% {
transform: translate3d(0, -1px, 0);
}


but for some reason the front page editor looks OK but in the live page view looks hideous with large pixel movements (well over the 3px)

Can anyone help?

https://www.paulc.marketing/uk-registration

9 Answers

Pavel

More than a month ago #Permalink
Just rename your animation. Name "bounce" - already in use
http://dl3.joxi.net/drive/2019/08/02/0008/0401/545169/69/f1d112fd42.png

Paul

More than a month ago #Permalink
Im trying to add a CSS Keyframe Animation with Delay Between Iterations

Ive added the following code to the css field

.btn-primary{
color: #000000;
background-color: #ffd012;
border-color: #ffd012;
width: 300px;
font-size: 20px;
animation: bounce 3.28s cubic-bezier(.36,.07,.19,.97) both;
animation-iteration-count: infinite;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 50px;
}

@keyframes bounce {
10%, 50% {
transform: translate3d(0, -1px, 0);
}

15%, 45% {
transform: translate3d(0, 2px, 0);
}

20%, 30%, 40% {
transform: translate3d(0, -2px, 0);
}

25%, 45% {
transform: translate3d(0, 3px, 0);
}
100% {
transform: translate3d(0, -1px, 0);
}


but for some reason the front page editor looks OK but in the live page view looks hideous with large pixel movements (well over the 3px)

Can anyone help?

https://www.paulc.marketing/uk-registration


I noticed I had two 45% in it so changed the one 25% 35% but it still is moving more than the 3px.

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Actually you are using a wrong frame rate. You can check this post from this link https://stackoverflow.com/a/32306141/5146848

Note: What you are asking for is identical to custom support and all types of custom support is strictly prohibited in our support policy.

-Best Regards

Paul

More than a month ago #Permalink
No the issue isnt the framerate it is SPPage builder is doing something to the code and blowing out the PX movement.

Just look at how many PX is moving......

it should only be a small 0px start to -1px to 2px to -2px back to 0px

not moving an inch across the screen.

Paul

More than a month ago #Permalink
renamed and shows ani in frontend editor but nothing in live.

Pavel

More than a month ago #Permalink
renamed and shows ani in frontend editor but nothing in live.

Do not use this code inside the addon css field. Use it in the css field of the entire page. And don't capitalize the class name first letter

Pavel

More than a month ago #Permalink
One more time . :) The css selector that is inserted into the css addon field is automatically added with the id of this addon.
When adding ID to keyframes code, it just breaks it. So add your code to the css of the entire page but not to the css of the addon
http://dl4.joxi.net/drive/2019/08/02/0008/0401/545169/69/73261bb836.png

Paul

More than a month ago #Permalink
One more time . :) The css selector that is inserted into the css addon field is automatically added with the id of this addon.
When adding ID to keyframes code, it just breaks it. So add your code to the css of the entire page but not to the css of the addon
http://dl4.joxi.net/drive/2019/08/02/0008/0401/545169/69/73261bb836.png

Thank you for the help with this, much appreciated.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 119
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 110
Toufiq

Toufiq

Total Accepted Answers: 89
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 4
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2

115

Templates

296166

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us