How to Animate a Glowing Effect on Text

How do I animate a glowing effect on text?

If you want to just use CSS3, you don't even have to use any jQuery/JavaScript. Just do this in your CSS:

.confirm_selection {
    -webkit-transition: text-shadow 0.2s linear;
    -moz-transition: text-shadow 0.2s linear;
    -ms-transition: text-shadow 0.2s linear;
    -o-transition: text-shadow 0.2s linear;
    transition: text-shadow 0.2s linear;
}
.confirm_selection:hover {
    text-shadow: 0 0 10px red; /* replace with whatever color you want */
}

Here's the fiddle: http://jsfiddle.net/zenjJ/

If you want the element to run on its own (without hovering), do this:

CSS:

.confirm_selection {
    -webkit-transition: text-shadow 1s linear;
    -moz-transition: text-shadow 1s linear;
    -ms-transition: text-shadow 1s linear;
    -o-transition: text-shadow 1s linear;
    transition: text-shadow 1s linear;
}
.confirm_selection:hover,
.confirm_selection.glow {
    text-shadow: 0 0 10px red;
}

JavaScript:

var glow = $('.confirm_selection');
setInterval(function(){
    glow.toggleClass('glow');
}, 1000);

You can play around with the timing in the CSS/JavaScript to get the exact effect you're looking for.

And finally, here's the fiddle: http://jsfiddle.net/dH6LS/

---

Update Oct. 2013: being that all major browsers now support CSS animations, all you need is this:

.confirm_selection {    animation: glow .5s infinite alternate;}
@keyframes glow {    to {        text-shadow: 0 0 10px red;    }}
.confirm_selection {    font-family: sans-serif;    font-size: 36px;    font-weight: bold;}

<span class="confirm_selection">[ Confirm Selection ]</span>

jQuery fading glow special text effect

You don't need to use any external plugins, you can do this with just jQuery 1.8 and css3 but it isn't easy. You need to combine css3 text-shadow property with animate()

UPDATE: Bugs fixed.

Here is working jsFiddle text glow effect.

jQuery:

var red = $(".red");
red.click(function() {
   if ( !$(this).is(':animated') )

    //you just adjust here
    red.glowEffect(0,40,500);
    //which is:
    //red.glowEffect( start value , destination value , duration );
});

$.fn.glowEffect = function(start, end, duration) {
    var $this = this;
    return this.css("a", start).animate({
        a: end
    }, {
        duration: duration,
        step: function(now) {
            $this.css("text-shadow","0px 0px "+now+"px #c61a1a");
        }
    });
};​

css:

.red { text-shadow: 0px 0px 0px #c61a1a; }

Note: No need to define vendor prefixes like -webkit- -ms- -moz- -o- jQuery 1.8 fixes that automaticly.

Source: I've asked alike question last week, and great answers came:

How to combine jQuery animate with css3 properties without using css transitions?

jQuery glowing animations : how to improve?

First, it might be helpful to see what you have to compare if our suggestions are "better".

I will tell you that contrast is really your friend when it comes to glowing though. I wrote some quick examples here to show a few different ideas. I used text-shadow here for the glow and you can stack them up to change the glow (for example, see 3rd option). If you want it to "animate" you can put it on a setinterval to toggle between classes (see first option).

I'm using jquery and jquery UI for the class toggle, but there are other alternatives as well.

Demo: http://jsfiddle.net/mikecruz/zjbXa

How can I make an animated/constant glowing effect around button in android?

What you can do is you can make a relative layout as a background like this-

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#FFC107"
        android:alpha="0.1"
        android:layout_marginBottom="30dp">

        <Button
            android:layout_width="match_parent"
            android:layout_height="40dp"

            />

    </RelativeLayout>

i have set the alpha to 0.1 initially in relative layout.

now in activity you can write the animation of fadein and fadeout-

ObjectAnimator fadeOut = ObjectAnimator.ofFloat(relativelayout, "alpha", .5f, .1f);
        fadeOut.setDuration(300);
        ObjectAnimator fadeIn = ObjectAnimator.ofFloat(relativelayout, "alpha", .1f, .5f);
        fadeIn.setDuration(300);

        mAnimationSet = new AnimatorSet();

        mAnimationSet.play(fadeIn).after(fadeOut);

        mAnimationSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mAnimationSet.start();
            }
        });

        mAnimationSet.start();

EDIT 3:

Update you layout like this copy and paste the code : change the color accordingly.

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp">

        <RelativeLayout
            android:id="@+id/relative_layout_id"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_centerInParent="true"
            android:background="#FFC107"
            android:alpha="0.1">

        </RelativeLayout>

        <Button
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="#000000"
            android:layout_centerInParent="true"

            />

    </RelativeLayout>

Glow Animation Effect in CSS3/HTML5

Use @keyframes.

You can make a pulsing animation like this.

#box {
  width:80px;
  height:80px;
  background:gray;
  animation:pulse 0.5s infinite alternate;
}

@keyframes pulse {
  from { box-shadow:0px 0px 10px 3px #0066cc; }
  to { box-shadow:0px 0px 20px 5px #0066cc; }
}

Note @keyframes should be prefixed like this: @-webkit-keyframes.
also the animation property should be prefixed

How to make a disappearing glow effect

What you are looking for is a CSS animation. Mainly because you don't want the default state with the glow, that's why transition won't work here.

.mat-cancel-color {  width: 160px;  border: 1px solid #dddddd;  color: #dddddd;  background-color: white;  border-radius: 25px;}
.mat-cancel-color:hover {  animation-name: glow;  animation-duration: .4s;}

.mat-cancel-color-trans {  width: 160px;  border: 1px solid #dddddd;  color: #dddddd;  background-color: white;  border-radius: 25px;  transition: all .4s ease;  box-shadow: 0px 0px 15px 10px rgba(255, 255, 0, 0);}

.mat-cancel-color-trans:hover {  box-shadow: 0px 0px 0px 0px rgba(255, 255, 0, 1);}

/* Standard syntax */
@keyframes glow {  0% {    box-shadow: 0px 0px 15px 10px rgba(255, 255, 0, 1);  }  100% {    box-shadow: 0px 0px 0px 0px rgba(255, 255, 0, 1);  }}

<button class="mat-cancel-color">Button</button>
<button class="mat-cancel-color-trans">Button</button>

Easily create an animated glow

You can use css animation. Here is an example using a vanilla div container, but you can give it a background image:

div {  width: 200px;  height: 200px;  border-radius: 100px;  background-color: #ccc;  animation: glow 1s infinite alternate;}
@keyframes glow {  from {    box-shadow: 0 0 10px -10px #aef4af;  }  to {    box-shadow: 0 0 10px 10px #aef4af;  }}

<div></div>

---

Related Topics