Need help? Check out our Support site, then


@keyframe animations and background-image's workaround for IE

  1. Hi there,
    I'm trying to find a workaround so that my @keyframes animations and my background-image property work with IE 6+ (and possibly other browsers which I am not aware of).
    I have a custom CSS, and I'm using the above properties as follows:

    background-image

    a.external {
      background-color: transparent;
      background-image: url('http://juditescoda.files.wordpress.com/2013/06/external_link.png');
      background-position: center right;
      background-repeat: no-repeat;
      background-size: .8em;
        -moz-background-size: .8em;
        -o-background-size: .8em;
        -webkit-background-size: .8em;
      background-image: none9;
      padding-right: 1.1em;
    }

    This is used a bit everywhere within my blog, but a specific page can be found here: http://juditescoda.com/portfolio/trylive-solutions/

    @keyframes

    @keyframes opac {
    	from {
    		opacity: 0;
    	}
    	to {
    		opacity: 1;
    	}
    }
    @-webkit-keyframes opac {
    	from {
    		opacity: 0;
    	}
    	to {
    		opacity: 1;
    	}
    }

    then opac is used as follows:

    #profile-content .show:target {
    	display: block;
    	animation: opac .3s;
    	-webkit-animation: opac .3s;
    	-moz-animation: opac .3s;
    	-o-animation: opac .3s;
    }

    It could be that ":target" is also not supported by IE?
    The page using target and animations is http://juditescoda.com/profile/

    Thanks for your help.

    The blog I need help with is juditescoda.com.

  2. Hi there!
    No answers so far but please please please I do need some help here.
    I actually paid for the CSS upgrade to have these (and other) functionalities implemented, so it's kind of a pity if, by doing so, my website is now not universally readable.
    I will really be thankful if anyone has a solution (or workaround) to my problem.
    Thanks a lot!!

  3. Custom Design upgrades do not change the fact that IE6 is not supported.

  4. Hi raincoaster,
    Thanks for clearing that out ;)
    I am not looking for IE6 support though. I'm looking for a way to have the following:
    - if the CSS functionality is supported by the browser, then use the functionality;
    - if the CSS functionality is not supported by the browser, then use this other functionality instead.

    The two CSS functionalities I use which are not universally supported (eg not supported by IE6, IE7, IE8 and possibly IE9) are @keyframes and background-images.

    I'd like to be able to use @keyframes and background-images for other browsers though (like Chrome or Firefox), because this is why I wanted the custom upgrade, so I'm trying to find a way to handle CSS exceptions for IE.

    Hope my answer helps.

  5. It could be that ":target" is also not supported by IE?

    I looked up http://www.w3.org/TR/css3-selectors/#selectors and I see :target is a CSS3 pseudo-class selector. Then I checked http://caniuse.com/#search=%3Atarget and I see that IE9 is the first browser to support CSS3 selectors.

    background-image looks like it should be supported in IE9:
    http://caniuse.com/#search=background-image

    Keyframes support appears to start in IE10: http://caniuse.com/#search=keyframes

    One thing you also have to be careful about is HTML5. If you are trying to apply a CSS selector to an HTML5 element, the browser would need to both support the CSS as well as the HTML 5 tag you've targeted (i.e. the "article" tag).

  6. I'd like to be able to use @keyframes and background-image for other browsers though (like Chrome or Firefox)

    Should be possible for the latest versions of the browsers (the ones that have animation support, and I think background-image has pretty good support, I use that a lot.

    I took a quick look at http://juditescoda.com/portfolio/trylive-solutions/ and I'm not sure you're using :target correctly (?) or perhaps you've modified the HTML and the selector where the animation is applied needs to be updated.

    Looking at this:

    #profile-content .show:target {
    	display: block;
    	animation: opac .3s;
    	-webkit-animation: opac .3s;
    	-moz-animation: opac .3s;
    	-o-animation: opac .3s;
    }

    I can't see an ID of "profile-content" on the http://juditescoda.com/portfolio/trylive-solutions/ page right now. And, the :target pseudo-class means you want to just target links that start with "#" like the ones in the box at the top of the page starting with "About TryLive." Is that what you were trying to target?

    Maybe could we step back and start with a super basic explanation of the animation you're trying to create and point out one specific link we can test so we can focus on that as a specific example?

    BTW, it's really cool to see you working on animations for CSS!

  7. Hi! How's it going with the @keyframe animations and background-image stuff?

  8. Hi designsimply!
    I was not automatically notified about your replies here and now that I see them I am so happy to read them!!!! :)

    Anyway, it is great news to here that my blog is half-working in IE9 and completely working in IE10 :)
    But since I've been told that IE8 is widely used, I am afraid I still need to find out a solution to my keyframe and background images problem :(

    My keyframe animation is only used in the Profile page actually http://juditescoda.com/profile/ that's why you couldn't find the #profile-content container in the TryLive page :)

    About what I'm trying to do in my Profile page then is the following: essentially, I didn't want to have a linear listing of my skills and experience.
    So I thought about an accordion menu for my skills and experience, something like this:
    http://www.thecssninja.com/demo/css_accordion/
    But I was having trouble because my accordion's div where not of the same size. Plus, I wasn't really happy about the overall look. But I liked the accordion smoothness.
    So I thought about showing/hiding my content with :target (like in the CSS3 accordion code), and play with the transparency of the container-to-show/to-hide to obtain a smooth effect, using animations.

    Then I noticed that the code of my WordPress pages were enhanced on the fly/dynamically by the Theme I am using. So it seemed that to have some control over the anchor's target position and avoid "jumps" or "cuts" in the reading flow of my page when clicking on the menu, I had to use several containers and play with CSS positioning. This did not affect the animation, but it does kind of get my HTML code messy (and to really explain what, why and how I'm doing what I'm doing I will have to really re-re-understand it myself... I could try if my reply here is not enough ^^).

    I don't know if my explanations on the use of :target and @keyframe are clear enough ...

    From my point of view though (and because I am no expert truly ^^) I think it would be easier to add the IE7/IE8 exception to my WordPress page (or my CSS code), other than re-thinking my div containers structure...
    What do you think?

  9. Oh, and about the use of background-image: I simply wanted to have an icon next to links that leave my blog or domain :)

  10. I should have checked this earlier, but I just looked up animation support and it starts getting support in version 10 and up for IE:
    http://caniuse.com/#search=animation

    I tested http://juditescoda.com/profile/ just now in IE9 and the animation doesn't work (that's expected based on the link above) but the content switch is still working and I think it looks good.

    But since I've been told that IE8 is widely used

    I think it depends greatly on the website audience. If your target audience is extremely low tech, that's the only reason I can think of to try to support IE8 at all. Many large companies have already dropped support for IE8, and even Microsoft will drop support for it in April 2014. :).
    http://zurb.com/article/1265/ie8-is-going-the-way-of-the-dodo-so-why-s

    From my point of view though (and because I am no expert truly ^^) I think it would be easier to add the IE7/IE8 exception to my WordPress page (or my CSS code), other than re-thinking my div containers structure...
    What do you think?

    First, you are totally an expert. :) You know far more about CSS than most people I know (possibly including me!).

    There is not a way to add your own conditional comments for IE into HTML on WordPress.com, so I think what you've got now is the best possible solution while still keeping some of the advanced show/hide stuff and the animations for modern browsers.

    Honestly, I think your target audience is going to have up to date browser versions anyway.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags