Animate CSS Help

AmethystAndAnkh

Info


Created
3 years, 2 months ago
Creator
AmethystAndAnkh
Favorites
75

Profile


Disclaimer This code is for experienced coders and particularly savvy inexperienced coders. If the sample text isn't animating, that means its animation type isn't supported on Toyhouse at this time. Post in HTML/CSS Whitelist & Tweaks to request this be fixed.

Unfortunately, there's no easy way to make this code usable by free accounts, that I can see. If anyone has an idea how I can make this work, let me know and I'll see what I can do.

This code is uploaded to Toyhouse by HidetoKoudanshi. I take NO CREDIT for the writing of this code. The code was written by Daniel Eden.

This code is provided as-is and no complete tutorial will be provided by me, only brief code snippets. I will link to the appropriate offsite tutorial and it's expected that you read there before you ask questions.

Anything can be bounced, flashed, pulsed, etc., from buttons and badges to images, as well as text and anything else you can think of. I've used plain text as the sample animation to keep this neat and simple. Click on the box with the animation type you want to use and it will open and show you everything. I had them all open originally but the cacaphony of animations going all at once was crazy distracting. I think the clickable card method is easier to concentrate on.

Sample Animate code in action.
Click and scroll down to find out how to customize use of these animations.

To use these in any profile, you need to put this as the top line in your CSS section:

@import '0/2137/32KEFj/animate';
Then continue with the instructions below.

Bounce Animation


bounce

How to use this code
Use a SPAN tag for inline bounces.
<span class="animated infinite bounce">YOUR BOUNCING CONTENT HERE</span>

Use a DIV for block-level bounces.
<div class="animated infinite bounce">YOUR BOUNCING CONTENT HERE</div>
Flash Animation


flash

How to use this code
Use a SPAN tag for inline flashes.
<span class="animated infinite flash">YOUR FLASHING CONTENT HERE</span>

Use a DIV for block-level flashes.
<div class="animated infinite flash">YOUR FLASHING CONTENT HERE</div>
Pulse Animation


pulse

How to use this code
Use a SPAN tag for inline pulses.
<span class="animated infinite pulse">YOUR PULSING CONTENT HERE</span>

Use a DIV for block-level pulses.
<div class="animated infinite pulse">YOUR PULSING CONTENT HERE</div>
Rubberband Animation


rubberband

How to use this code
Use a SPAN tag for inline rubberbands.
<span class="animated infinite rubberband">YOUR RUBBERBANDING CONTENT HERE</span>

Use a DIV for block-level rubberbands.
<div class="animated infinite rubberband">YOUR RUBBERBANDING CONTENT HERE</div>
Shake Animation


shake

How to use this code
Use a SPAN tag for inline shakes.
<span class="animated infinite shake">YOUR SHAKING CONTENT HERE</span>

Use a DIV for block-level shakes.
<div class="animated infinite shake">YOUR SHAKING CONTENT HERE</div>
Swing Animation


swing

How to use this code
Use a SPAN tag for inline swings.
<span class="animated infinite swing">YOUR SWINGING CONTENT HERE</span>

Use a DIV for block-level swings.
<div class="animated infinite swing">YOUR SWINGING CONTENT HERE</div>
Tada Animation


tada

How to use this code
Use a SPAN tag for inline tadas.
<span class="animated infinite tada">YOUR TADA-ING CONTENT HERE</span>

Use a DIV for block-level tadas.
<div class="animated infinite tada">YOUR TADA-ING CONTENT HERE</div>
Wobble Animation


wobble

How to use this code
Use a SPAN tag for inline wobbles.
<span class="animated infinite wobble">YOUR WOBBLING CONTENT HERE</span>

Use a DIV for block-level wobbles.
<div class="animated infinite wobble">YOUR WOBBLING CONTENT HERE</div>
Jello Animation


jello

How to use this code
Use a SPAN tag for inline jellos.
<span class="animated infinite jello">YOUR JELLOING CONTENT HERE</span>

Use a DIV for block-level jellos.
<div class="animated infinite jello">YOUR JELLOING CONTENT HERE</div>
Heartbeat Animation


heartBeat

How to use this code
Use a SPAN tag for inline heartbeats.
<span class="animated infinite heartBeat">YOUR HEARTBEATING CONTENT HERE</span>

Use a DIV for block-level heartbeats.
<div class="animated infinite heartBeat">YOUR HEARTBEATING CONTENT HERE</div>
BounceIn Animation


bounceIn

How to use this code
Use a SPAN tag for inline bounceIns.
<span class="animated infinite bounceIn">YOUR BOUNCEIN-ING CONTENT HERE</span>

Use a DIV for block-level bounceIns.
<div class="animated infinite bounceIn">YOUR BOUNCEIN-ING CONTENT HERE</div>
BounceInDown Animation


bounceInDown

How to use this code
Use a SPAN tag for inline bounceInDowns.
<span class="animated infinite bounceInDown">YOUR BOUNCEINDOWN-ING CONTENT HERE</span>

Use a DIV for block-level bounceInDowns.
<div class="animated infinite bounceInDown">YOUR BOUNCEINDOWN-ING CONTENT HERE</div>
BounceInLeft Animation


bounceInLeft

How to use this code
Use a SPAN tag for inline bounceInLefts.
<span class="animated infinite bounceInLeft">YOUR BOUNCEINLEFT-ING CONTENT HERE</span>

Use a DIV for block-level bounceInLefts.
<div class="animated infinite bounceInLeft">YOUR BOUNCEINLEFT-ING CONTENT HERE</div>
BounceInRight Animation


bounceInRight

How to use this code
Use a SPAN tag for inline bounceInRights.
<span class="animated infinite bounceInRight">YOUR BOUNCEINRIGHT-ING CONTENT HERE</span>

Use a DIV for block-level bounceInRights.
<div class="animated infinite bounceInRight">YOUR BOUNCEINRIGHT-ING CONTENT HERE</div>
BounceInUp Animation


bounceInUp

How to use this code
Use a SPAN tag for inline bounceInUps.
<span class="animated infinite bounceInUp">YOUR BOUNCEINUP-ING CONTENT HERE</span>

Use a DIV for block-level bounceInUps.
<div class="animated infinite bounceInUp">YOUR BOUNCEINUP-ING CONTENT HERE</div>
BounceOut Animation


bounceOut

How to use this code
Use a SPAN tag for inline bounceOuts.
<span class="animated infinite bounceOut">YOUR BOUNCEOUT-ING CONTENT HERE</span>

Use a DIV for block-level bounceOuts.
<div class="animated infinite bounceOut">YOUR BOUNCEOUT-ING CONTENT HERE</div>