Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Easy CSS Animated Flaming Text


CSS3 added many new features, one of them was the ability to create animations entirely in CSS, without JavaScript. CSS animations are a way of chaining multiple transitions on the same property together to be executed one after another.

animation: fire 2.0s infinite alternate;

First define the animation. Above we define an animation named fire that will have a duration of 2.0 seconds. The infinite value means we want it to repeat forever. The alternate value means we want it to reverse direction every cycle.

@keyframes fire
       5px -25px 50px yellow,
       0 0px 20px red,
       10px -15px 15px orange;
       0 -20px 30px yellow,
       15px -5px 20px red,
       5px 0 20px orange;
       10px -25px 50px yellow,
       5px -10px 20px red,
       0 -5px 20px orange;
       0 -20px 50px yellow,
       5px -15px 20px red,
       10px 0 20px orange;

Then we use the @keyframes directive, followed by the name of the animation, followed by a list of the steps, or keyframes, in the animation.

Here, we have used percentage selectors which define the property values at specific percentages of the animation duration time. The percentage defines at what point in the 2.0 second interval the specified property values should be reached. The animation transitions from one set of property values to the next.

The property we used in the transition is the text-shadow property. Shown below is the syntax for the text-shadow property.

text-shadow: horizontal-offset vertical-offset blur-radius color;

Note that I have defined three different shadow colors; yellow, red, and orange. The shadows are layered in the order in which they are specified. The flame effect is created by changing the horizontal-offset and vertical-offset values to move the shadows around.

<span class="anim_fire">

Lastly, apply the animation to an html element. Here we defined the animation in a style class named .anim_fire, which we applied to an html span element containing the text "FIRE".

You are free to experiment with your own horizontal-offset, vertical-offset, blur-radius, and color values. CSS3 animations are fun and easy to create (assuming that you already know CSS), and you'll find many very creative examples spread across the web.

More Easy Cascading Style Sheets:
• CSS Arts and Crafts - Create a Graphic Cube Using the CSS3 Transform Property
• Easy Rollover Menu Code
• Easy Floating Menu Code
• Easy CSS 3D Mouse-over Pressed Text Effect
• Make a Fixed-width Variable-height Round Cornered Box
• Code for Horizontal Drop-down Menu Bar
• How to Overlay Text on an Image
• Style Your Imagemap Tooltips
• Using Google Fonts
• Use @font-face Rule to Load External Fonts For Your Webpage

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2023 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268