CodingForums.com - Animating text using CSS

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Animating text using CSS (http://www.codingforums.com/showthread.php?t=280977)

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?

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

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.

No problem, you're very welcome. ;)

coothead