CSS Animation A:Active

by Jens Kühn

HTML

<a href="#form"> link to target #form</a>
    <a href="#form2"> link to target #form2</a>

    
    
    <form id="form">
        targeted form <br />
        targeted form <br />
    </form>
    <br/>
    <div style="height:15em"></div>
        <form id="form2">        
            targeted form <br />
        targeted form <br />
    </form>

CSS

/**
 * The first commented line is your dabblet’s title
 */

form {
    background-color: #f5f5f5;
}

form:target {
    -webkit-animation: target-fade 1s 1; /* value is demo only */
     -moz-animation: target-fade 1s 1;
       -o-animation: target-fade 1s 1;
    animation: target-fade 1s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: #ff0000; }
    100% { background-color: #f5f5f5; }
}
@-moz-keyframes target-fade {
    0% { background-color: #ff0000; }
    100% { background-color: #f5f5f5; }
}
@-o-keyframes target-fade {
    0% { background-color: #ff0000; }
    100% { background-color: #f5f5f5; }
}

@keyframes target-fade {
    0% { background-color: #ff0000; }
    100% { background-color: #f5f5f5; }
}