Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Animating text using CSS

    hi

    i am trying to create a text animation that simply slides text along to a certain point. the trouble im having is the text must start off invisible when the page loads, then become visible for the animation, and remain visible afterwards. ive tried using opacity but i cant get it right. pls can someone advise?

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there backa,

    and a warm welcome to these forums.

    does this help...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>animated text</title>
    
    <style type="text/css">
    #animated-text {
        margin-left:250px;
        font-size:200%;
        -moz-animation-duration:3s;
        -moz-animation-name:slidein;
        -webkit-animation-duration:3s;
        -webkit-animation-name:slidein;
        -o-animation-duration:3s;
        -o-animation-name:slidein;
     }
    @-moz-keyframes slidein {
    from {
        margin-left:-50px;
        opacity:0;
        font-size:10%;
     } 
    to {
        margin-left:250px;
        opacity:1;
        font-size:200%;
      }
     }
    @-webkit-keyframes slidein {
    from {
        margin-left:-50px;
        opacity:0;
        font-size:10%;
     } 
    to {
        margin-left:250px;
        opacity:1;
        font-size:200%;
      }
     }
    @-o-keyframes slidein {
    from {
        margin-left:-50px;
        opacity:0;
        font-size:10%;
     } 
    to {
        margin-left:250px;
        opacity:1;
        font-size:200%;
      }
     }
    </style>
    
    </head>
    <body>
    
    <div>
     <span id="animated-text">animated text</span>
    </div>
    
    </body>
    </html>
    
    coothead

  • Users who have thanked coothead for this post:

    backa (11-06-2012)

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Sure does, thanks! I see the problem was how I was laying out the keyframes. Instead of from/to I was using this format:
    Code:
    @-moz-keyframes move1 {
    	0% { opacity: 0; }
    	100% { opacity: 1; }
    }
    I didn't think it mattered but evidently it does.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts

    No problem, you're very welcome.


    coothead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •