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

Create Animated Glowing Text

GLOW

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.

.anim_glow
{
animation: glow 1.5s infinite alternate;
}

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

@keyframes glow
{
from { text-shadow: 0 0 10px #FF9090; }
to { text-shadow: 0 0 20px red; }
}

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 defined the keyframes using the selectors from and to. For each keyframe you define a semicolon separated list of CSS properties. from defines the property values at the beginning of the transition, to defines the values at the end of the transition. Of course in this example the alternate value means we want it to reverse direction every cycle.

Alternately you could use percentage selectors which define the property values at specific percentages of the animation duration. Percentage values can be from 0-100%, and using percentage values You can have as many keyframe selectors as you want in one animation.

<span class="anim_glow">
GLOW
</span>

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

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:
• Add Drop Shadows to Your Pictures
• Setting a Larger First Letter
• Easy Scrollable Area Code
• Create a Cool Picture Frame Effect with CSS
• How to Make Images Responsive
• Spice Up Your Web Forms with Color and Graphics
• CSS Transition Code For a Pulsating Button
• Add Style to Your Blockquotes
• How to Overlay Text on an Image
• Create Animated Glowing Text

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-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268