How to Make Text Fade in CSS

Save

Creating keyframes in CSS makes it possible to animate any part of your Web page. Once you create keyframes in the stylesheet, they become available for reuse on as many page elements as you want. Fading text in CSS requires a keyframing code that sets opacity to full at one point in the animation and changes it to full transparency at another point.

  • Open the stylesheet for your Web page in Notepad or a code editor. If your Web page does not yet have one, create a blank file and save it as “style.css.” Add this line after the “<title>” tags in the HTML code of your Web page to add the stylesheet:

    <link rel=”stylesheet” href=”path/to/style.css” type=”text/css” />

    Change “path/to/style.css” to the file path that leads to your stylesheet.

  • Create a keyframe animation in the stylesheet using the following syntax:

    @keyframes fade-text {
    0%, 100% {
    }
    50% {
    }
    }

    Add CSS properties like “color” or “opacity” inside the curly brackets next to the percentages. Each percentage number in the keyframe represents a position within the animation, or a keyframe. Setting the starting and ending positions to the same properties allows you to loop the animation smoothly.

  • Set each keyframe to a different opacity:

    @keyframes fade-text {
    0%, 100% {

      opacity: 1;

    }
    50% {

      opacity: 0;

    }
    }

    By making “opacity” equal to one for the beginning and end of this animation, you make it start and stop at full opacity. A zero opacity at the 50 percent mark fades the animation out completely halfway through; set it to decimal point values like “0.5” if you do not want the animation to ever become invisible.

  • Write a new style rule for the text you want to do a fading animation on:

    fading_text {

    }

    In the example, “#fading_text” is an ID selector that finds any tag on the page with an ID of “fading_text.” Open your Web page and look at the code to find or add an ID for the tags that surround your text. Add tags like this if you needs tags: <span id=”fading_text”>text to animate</span>.

  • Call the keyframe animation inside the style rule:

    fading_text {

    animation: fade-text 10s infinite;
    }

    The first value is the name of your keyframe, followed by the duration in seconds and then a repetition type. An infinite repetition loops the animation over and over again; replace this with an integer number like “10” to specify a finite number of loops.

  • Go through and duplicate both the keyframe animation itself and any calls to the animation. You must have a copy of the code prefixed with “-webkit” and another copy prefixed with “-moz” to make the code compatible with Chrome, Safari and Firefox:

    @-webkit-keyframes fade-text {
    0%, 100% {

      opacity: 1;

    }
    50% {

      opacity: 0;

    }
    }
    @-moz-keyframes fade-text {
    0%, 100% {

      opacity: 1;

    }
    50% {

      opacity: 0;

    }
    }

    fading_text {

    -webkit-animation: fade-text 10s infinite;
    -moz-animation: fade-text 10s infinite;
    }

Tips & Warnings

  • Flip opacity settings in your keyframes so the first keyframe has a zero opacity and the second has full opacity. This makes the text fade onto the page.
  • In Internet Explorer browsers 9 and below, your text will not animate. This is because those browsers are not compatible with keyframe animations. However, the text will still appear on the page.

Related Searches

References

Promoted By Zergnet

Comments

Related Searches

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!