override keyframe style when element is target

[TomerHaCohen]

Hi, I'm writing a pure css slideshow for my website, with dots which are being turned on and off according to the current image.

By default the slideshow works automatically (keyframe animation), till the user clicks one of the dots and the according image is being displayed. When a dot is being clicked, the colors of all the dots are defined by "::target".

The problem is that the auto color defined by the animation overrides the custom color that defined under "::target". I tried to solve it with "!important" but it works only in firefox, and not in chrome, safari or IE.

This is a part of my code. All the code can be find here http://jsfiddle.net/pwneW/ .

I will appreciate any help! Thanks.
Tomer.

<li><a class="dots" id="dot1" title="Show slide 1" href="#sl_i1">Slide 1</a></li>





  @-webkit-keyframes dotcolor1{

        0%, 23%, 100%       { background: rgb(191,121,178); }
        25%, 97%                { background: white;            }   
    }

    @-moz-keyframes dotcolor1 {

        0%, 23%, 100%       { background: rgb(191,121,178); }
        25%, 97%            { background: white;            }   
    }

    @keyframes dotcolor1 {

        0%, 23%, 100%       { background: rgb(191,121,178); }
        25%, 97%            { background: white;            }   
    }

    #dot1{
        -webkit-animation: dotcolor1 24s infinite;
        -moz-animation: dotcolor1 24s infinite;
        animation: dotcolor1 24s infinite;
    } 
    /*stop animation when some dot is target*/
    sl_command:target ~ #slideshow .dots
    {
        -webkit-animation-play-state: paused;
        -moz-animation-play-state: paused;
        animation-play-state: paused;
    }

    #sl_i1:target ~ #slideshow #dot1                                    { background:rgb(191,121,178) !important;}
    #sl_i1:target ~ #slideshow #dot2                                    { background:white !important; }
    #sl_i1:target ~ #slideshow #dot3                                    { background:white !important; }
    #sl_i1:target ~ #slideshow #dot4                                    { background:white !important; }

[LastMitch]

The problem is that the auto color defined by the animation overrides the custom color that defined under "::target". I tried to solve it with "!important" but it works only in firefox, and not in chrome, safari or IE.

@TomerHaCohen

I never seen a slideshow just using CSS. You still need to do alot of research on CSS. I think HTML5 & CSS3 can do that but for certain browsers meaning certain HTML5 & CSS3 code can work together and some not.

This is too much work, work means a lot of time to invested into this.

This is consider as trial & error issue.