css animations using Dan Eden's live demo

[drone4four]

I’m trying to decorate a heading with CSS animations.

I found a real great demo site. See here for a code sample by a developer named Dan Eden: https://daneden.github.io/animate.css/

I can’t seem to replicate these amazing animations on my website. Here is my test-case on code-pen: http://codepen.io/Angeles4four/pen/oXwmEj

Its a rather crude implementation. Could someone with more experience be able to share how I could better implement the heading animation using Dan Eden’s CSS code sample?

Many thanks,

[Ryan Yurkanin]

The reason that no animations are happening to the header is simply because you aren’t giving it the proper classes to be styled by the css.

Upon observing the header in the chrome dev tools I see that the only class header has is bounce. In bounce you are only declaring which keyframe you are going to use in animation. The other 2/3’s of what you need can be found in the classes animated and something like bounceIn. If you manually add both those classes you will see it animate.

Here are some reading materials for you. You will benefit greatly from understanding exactly what a keyframe is, and how to use css-animations in general.

https://css-tricks.com/almanac/properties/a/animation/
https://css-tricks.com/snippets/css/keyframe-animation-syntax/
http://www.w3schools.com/css/css3_animations.asp

Enjoy!

[drone4four]

Thank-you Ryan Yurkanin for the documentation.

Yes, the reason why I couldn’t get animations working is because I wasn’t calling the classes properly in my html. I did get the animations working after playing around the code. Here is fork of my codepen with a working animation: http://codepen.io/Angeles4four/pen/doRrrm

And here are the animations implemented on my webserver: http://www.angeles4four.info/nolkirne_final_adapted_code_combat_15June2k15/

[drone4four]

I’m back playing with animations again.

Shortly after finding my solution back in June I implemented the code-pen sample. It has been working well for some time in my twitter bootstrap based ‘production environment’ on my live web-server. But I noticed about a week ago the animations just stopped working. I don’t have an explanation. I didn’t make any changes which could have impacted this animation. Here is my reduced test case with broken animations: http://codepen.io/Angeles4four/pen/WrKWvm

Can anyone figure out why the animations are broken in my reduced testcase?

Again, I have been playing with that test case and comparing to the codepen sample in my previous post which has animations working flawlessly. See here: http://codepen.io/Angeles4four/pen/doRrrm

As I understand, the only necessary class for the heading in the HTML is “site__header” which is in both test cases. And the CSS and JS are identical copy and pastes. What am I doing wrong?

Thanks for your attention,

[drone4four]

I’m thunder struck. I see when I place the animation class attribute in the h1 element rather than in a span element, it works. But that doesn’t make any sense because for 6 months that “site__header” wrapper was in-cased with a span element. All of a sudden a few weeks ago that stopped working. What can you people make of this?

[Author]

Posts