Keyframe animation via CSS not working

Moochi · November 20, 2014

Hi everyone,

I've been trying to get a simple CSS text animation via @keyframe to work in my page, but it won't.
In my HTML block I put this http://codepen.io/foxtuon/pen/PwwQLm
ease works fine, but keyframes won't, tried to use class instead of id but no luck :scratch .

Is there a way to make it work ?

Thanks

leftquark · November 20, 2014

Could you provide me a link to the page where you're trying to make it work? To which element are you trying to have it pulse?

Moochi · November 20, 2014

I'm cooking a new home page here
http://www.hafezphotography.com/Home-test/n-FF3cb
and wanted to have some effects going around .. still unable to.

pilotdave · November 22, 2014

Moochi wrote: »

I'm cooking a new home page here
http://www.hafezphotography.com/Home-test/n-FF3cb
and wanted to have some effects going around .. still unable to.

The code works fine on smugmug... I added it to my homepage. The challenge you're having is just getting it to target the right part of the page. I'd suggest posting the exact code you're using and someone will find the error.

Dave

Moochi · November 22, 2014

Okay, here is an example
http://www.hafezphotography.com/Web/Empty/n-4mmv9
The &:hover ease and transform works fine, but @keyframe animation won't run.
HTML/CSS included in the page.
here is the exact code working at
http://codepen.io/foxtuon/pen/qEEGVw

Aaron, your CSS customizations tips in your website are wonderful.

Thank you for your help

pilotdave · November 24, 2014

Moochi wrote: »

Okay, here is an example
http://www.hafezphotography.com/Web/Empty/n-4mmv9
The &:hover ease and transform works fine, but @keyframe animation won't run.
HTML/CSS included in the page.
here is the exact code working at
http://codepen.io/foxtuon/pen/qEEGVw

Aaron, your CSS customizations tips in your website are wonderful.

Thank you for your help

Looks like your actual CSS might be missing some of the code that's shown on the page.

This seems to be the working CSS for that page:

.sm-page-widget.sm-page-widget-8829395 #w2{color:grey;font-size:1.2em;font-family:sans-serif;text-align:center!important;-webkit-transition:all 350ms ease;transition:all 350ms ease;margin-top:0;margin-right:15px;width:50px;padding:10px 20px;position:absolute}

.sm-page-widget.sm-page-widget-8829395 #w2:hover{
            cursor:pointer;
            -webkit-transform:scale(2.1,2.1);
            transform:scale(2.1,2.1);
            -webkit-animation:pulse 1s infinite;
            animation:pulse 1s infinite;
            -webkit-animation-duration:1s;
            animation-duration:1s;
            -webkit-animation-play-state:running;
            animation-play-state:running
            }

@-webkit-keyframes pulse {
0% { -webkit-transform: scale3d(1, 1, 1);              transform: scale3d(1, 1, 1); }
50% { -webkit-transform: scale3d(1.05, 1.05, 1.05);              transform: scale3d(1.05, 1.05, 1.05); }
 100% { -webkit-transform: scale3d(1, 1, 1);  transform: scale3d(1, 1, 1); }
 }

@keyframes pulse { 
 0% { -webkit-transform: scale3d(1, 1, 1);  transform: scale3d(1, 1, 1); }
50% { -webkit-transform: scale3d(1.05, 1.05, 1.05);  transform: scale3d(1.05, 1.05, 1.05); }
 100% { -webkit-transform: scale3d(1, 1, 1);  transform: scale3d(1, 1, 1); } 
}

It works for me using Chrome's inspect element.

Dave

Moochi · November 24, 2014

I will assume it is a security thing, sanitizing the CSS from @whatever.
The code it there when customizing the page, but just as you mentioned, when I inspect element, I find no (@keyframes) at all.

pilotdave · November 24, 2014

Moochi wrote: »

I will assume it is a security thing, sanitizing the CSS from @whatever.
The code it there when customizing the page, but just as you mentioned, when I inspect element, I find no (@keyframes) at all.

No idea why that would be happening. It's working fine on my site. The only difference is I'm using it with a "built-in" element (galleries content block) as opposed to custom html. But there shouldn't be any difference in the treatment of the CSS.

I guess I should ask where the CSS is located. In a CSS content block, in the HTML/CSS content block, or in the theme? If it's in the HTML/CSS content block, try moving it to a standalone CSS content block or into your theme's CSS.

Dave

Moochi · November 24, 2014

I really don't know, I must have done something wrong, I tried other animations, and it worked, I still can't solve this particular one.
it works fine on your wonderful homepage. I just need more coffee

Thanks a lot Dave, appreciate your time

leftquark · November 27, 2014

I'm still confused what you want to use the keyframes for? Are you trying to make something that pulses in and out as the mouse is hovered over it? If you're just trying to have it zoom in when the mouse is over it, you don't need keyframes and you can use the code I provided earlier. What feature exactly are you trying to replicate?

pilotdave · November 28, 2014

leftquark wrote: »

I'm still confused what you want to use the keyframes for? Are you trying to make something that pulses in and out as the mouse is hovered over it? If you're just trying to have it zoom in when the mouse is over it, you don't need keyframes and you can use the code I provided earlier. What feature exactly are you trying to replicate?

Yeah, it pulses in and out when hovering. I ended up removing it from my homepage due to a bug in chrome that causes severe blurring when scaling. It ended up blurring both the image and the text every time it pulsed, but only in chrome.

Dave

Moochi · December 1, 2014

Sorry Aaron if what I had on the web page was a little confusing,. All I'm trying to get to work is animation using @Keyframes, I still can't, and I guess I won't bother anymore.
same code works outside SmugMug, I assume that @keyframe, @import are not supported via SmugMug HTML/CSS customization., at least on my own website

leftquark · December 1, 2014

Would you mind posting a link to the page you're trying to get it to work on? Also, which element are you trying to make pulse?

You want it to pulse, big and then small, big and then small, right? The initial post you linked to just had images that zoomed in on hover.

Moochi · December 1, 2014

Alright, Here is the page http://www.hafezphotography.com/Web/Empty/n-4mmv9 .
I'm trying to get the red box on the top to pulse. the code I have on the page is the exact code I have inside the HTML/CSS block.
I load the page in Safari, Firefox, Chrome, and inspect element, I can't find any "@keyframe".
I copy, paste the exact code from this block to codepen http://codepen.io/foxtuon/pen/XJmRzZ , and pulse animation works fine

leftquark · April 27, 2015

I wanted to let you all know that we now allow keyframe animations to be used as CSS. Let me know if you have any problems getting them to work.

Moochi · May 25, 2015

OMG Thanks
I just refreshed the HTML/CSS box, and all works super.
you guys are awesome.

leftquark · May 25, 2015

Moochi wrote: »

I just refreshed the HTML/CSS box, and all works super.
you guys are awesome.

I'd love to see how you implement it on your site when you have it live!

Moochi · May 25, 2015

I will make sure to publish it once it is all ready

Maybe some Ken Burns slides with text animation over it. will see

Thank you again.

Keyframe animation via CSS not working

Comments