Introduction

This tutorial has been created to show you quickly how to use CSS-Anim to animate your web pages. It is divided into the main steps you have to follow to include the technology within your page. The tutorial will start with that following very basic page with two anchor elements that we will animate later : 
        
<html>
<body>
     <a href="#">My first link</a><br/>
     <a href="#">My second one</a>
</body>
</html>

Step 1: Setting CSS-Styles

To avoid having the animation starting with values like 0 or black, it's better to specify an initial value for the CSS properties either statically (like in that tutorial) or dynamically : 
<html>
<body>
     <a style="color: #000000; font-size: 10pt;" href="#">My first link</a><br/>
     <a style="color: #000000; font-size: 10pt;" href="#">My second one</a>
</body>
</html>
Download source code here

Step 2: Initialize the CSS-Admin framework

Include the script file (cssa.js) of CSS-Admin in your page and call the cssa_init_framework() function when loading the page. Your code should then look like that : 
<html>
<head> 
     <script src="../cssa/cssa.js" language="javascript"></script> 
</head>
<body onload="cssa_init_framework();">
     <a style="color: #000000; font-size: 10pt;" href="#">My first link</a><br/>
     <a style="color: #000000; font-size: 10pt;" href="#">My second one</a>
</body>
</html>
Download source code here

Step 3: Create animations

In that tutorial, we will create two animation objects to change the color using a 2 seconds delay and the font-size using a 500ms delay. We will make the color change for ever by reverting at the end of the animation. 
<html>
<head>
    <script src="../cssa/cssa.js" language="javascript"></script>
</head>
    <body onload="cssa_init_framework();">
    <script language="javascript">
        function linkMouseOver(oElem) 
        {
            new cssa_AnimationInteger(oElem, 'fontSize', 20, 500, false, false); 
            new cssa_AnimationColor(oElem, 'color', '#00ffff', 2000, true, true); 
        }
    </script>
    <a style="color: #000000; font-size: 10pt;" onmouseover="linkMouseOver(this);" href="#">My first link</a><br/>
    <a style="color: #000000; font-size: 10pt;" onmouseover="linkMouseOver(this);" href="#">My second one</a>
</body>
</html>
Download source code here

Step 4: Stopping/changing current animations

No more than one animation can be configured for a given pair of element and property. Any new animation on a property already animated would simply be ignored. To cancel a running animation, we could use one of the cancel functions (per element, global or per property). In our tutorial, in case of mouseout, we will cancel the current animation and re-create a new one to move to the original value : 
<html>
<head>
    <script src="../cssa/cssa.js" language="javascript"></script>
</head>
    <body onload="cssa_init_framework();">
    <script language="javascript">
        function linkMouseOver(oElem) 
        {
            cssa_Anims.deleteAnimationsForElem(oElem);
            new cssa_AnimationInteger(oElem, 'fontSize', 20, 500, false, false); 
            new cssa_AnimationColor(oElem, 'color', '#00ffff', 2000, true, true); 
        }

        function linkMouseOut(oElem)
        {
            cssa_Anims.deleteAnimationsForElem(oElem);
            new cssa_AnimationInteger(oElem, 'fontSize', 10, 200, false, false);
            new cssa_AnimationColor(oElem, 'color', '#000000', 1000, false, false);
        }
    </script>
    <a style="color: #000000; font-size: 10pt;" onmouseover="linkMouseOver(this);" onmouseout="linkMouseOut(this);" href="#">My first link</a><br/>
    <a style="color: #000000; font-size: 10pt;" onmouseover="linkMouseOver(this);" onmouseout="linkMouseOut(this);"  href="#">My second one</a>
</body>
</html>
Download source code here

Finally, look at the documentation

Now you discovered the basics about CSS-Admin, check the reference to get more details.