Skip navigation
man at work
man at work
Currently Being Moderated

Make CSS3 animation gracefully degrade in IE9

Mar 16, 2013 2:50 PM

Tags: #ie9 #animations #css3 #conditional #statement

Hello!

I´ve made this animating logo with CSS3 animations that drops down from outside the browser window.
See it in action: http://mainland.se/css3/

The logo is placed in a AP-div and positioned -100px from the top. As you can see it works fine in most browsers.

When it comes to IE9 the problem is that because the staringpoint of the logo is -100px top the logo dosen´t

show up at all. I tried with a conditional statement for IE9 but no luck.

Anyone who has a suggestion?

Regards

Arne

415 Views   6 Replies   Latest reply: hans-g., Mar 18, 2013 3:39 AM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Mar 16, 2013 3:05 PM   in reply to man at work
    Report

    Use jQuery to hide your div on page load.  Negative positioning is trouble.

    http://alt-web.com/DEMOS/jQuery-slide-n-fadeIn-demo.shtml

     

     

    Nancy O.

     
    |
    Mark as:
  • man at work
    Currently Being Moderated
    2. man at work,
    Mar 17, 2013 4:56 AM   in reply to Nancy O.
    Report

    Hello Nancy!

    Thanks for the suggestion, now it works in IE when I changed the logo position from top: -100px to top: 0px;.

    Now the animation in the other browsers are now doubled instead.

    Is there a way to in jquery to prevent the slidefunction in Chrome. Opera an FF and just fade in the

    logo in IE?
    //Arne

     
    |
    Mark as:
  • pziecina
    Currently Being Moderated
    3. pziecina,
    Mar 17, 2013 5:01 AM   in reply to man at work
    Report

    Hi

     

    IE9 does not support css3 animations.

     

    You could use transitions/transforms in IE9.

     

    PZ

     
    |
    Mark as:
  • hans-g.
    Currently Being Moderated
    4. hans-g.,
    Mar 17, 2013 5:37 AM   in reply to man at work
    Report

    Hello Arne,

     

    this animation I can see very fine in my IE 10 and too and a bit less perfectly in my FF 19.0.2.

     

    This IE 10 I installed a short time before with a certain "stomach rumbling" because I thought it was associated with greater difficulties, but "whizz" it was done! Since then I'm very satisfied with it and I'm experimenting with different already published CSS3 possibilities. You will probably have to insert a statement referring to this IE 10 thing on your website.

     

    And here a hint I got from Paula (thanks again) in another forum: If you wish to see how the code is used in IE10 then read http://msdn.microsoft.com/en-us/library/ie/hh673558.aspx.

     

    Hans-Günter

     
    |
    Mark as:
  • man at work
    Currently Being Moderated
    5. man at work,
    Mar 17, 2013 8:14 AM   in reply to hans-g.
    Report

    Thanks to you all for your suggestions.

    My objective was to make the logo visible in IE9 and down dispite the logo position of top:-100px; and not caring about any animation.

    I finally fixed the issue. Of course the conditional statement for IE lte 9 should be inserted at the bottom of the CSS stack.

    A practicle example of CSS specificity?

    //Arne

     
    |
    Mark as:
  • hans-g.
    Currently Being Moderated
    6. hans-g.,
    Mar 18, 2013 3:39 AM   in reply to man at work
    Report

    Hello Arne,

     

    ---------- deleted (it seems it was a misunderstanding) ----------

     

    Hans-Günter

     

    Message changed by hans-g.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points