Animate CSS Help
AmethystAndAnkh
- Created
- 4 years, 6 months ago
- Creator
- AmethystAndAnkh
- Favorites
- 114
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.
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';
Bounce Animation
bounce
How to use this code
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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>
Recent Images
No images.