Member Avatar for 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; }
  • 2 Contributors
  • 1 Reply
  • 208 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

Short answer: keyframe-generated values win over normal declarations while an animation is controlling a property, so a running keyframe can hide a plain :target rule. The CSS cascade treats animation effects as a separate origin that sits above normal author rules; only !important declarations (and transitions in progress) are supposed to beat animations per the spec. (developer.mozilla.org)

Practical fixes (ordered by reliability):

  • Turn the animation off when the user selects a slide. Removing the animation entirely is the simplest cross‑browser solution: set animation: none (and vendor-prefixed equivalents) on the same element the keyframes animate when your :target selector matches. This avoids fighting the animation-generated value. Also animation-play-state: paused can work but only if it actually targets the animated element. (developer.mozilla.org)

    Example pattern:

    /* when a slide is targeted, stop the dot animations */
#sl_i1:target ~ #slideshow .dots {
  animation: none !important;
  -webkit-animation: none !important;
}

  • If you need the animation to continue elsewhere, move the color-animation to a separate layer (a pseudo-element or wrapper) and let the visible background for the dot be controlled by the main element (so :target can set that background without the keyframe touching it). That sidesteps cascade fights altogether.

  • If you must support an older Chromium/Safari build that ignores !important against animations (a historically reported bug), use a small bit of JS on click to toggle a class that removes the animation — this is robust and simple to implement. See the browser-note below. (css-tricks.com)

Quick debugging checklist: verify your :target selector actually matches (typos like a missing # are common), inspect the computed style in DevTools to see whether the keyframe or the rule wins, try disabling the animation in DevTools to confirm the :target rule works, and double-check animation-fill-mode (forwards can make keyframe values persist). If you post the exact HTML structure I can suggest the precise selector to stop the animation when a dot is chosen.

Member Avatar for Member #949455

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.

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.