Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] "animation-delay" property issue

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #175646
    sqnkov
    Participant

    Hello!

    I have applied some css3 animations to a element on my page, which appearance I want to delay. The animation-delay property works well enough under chrome, with 1s delay as a given value, but under other browsers the delay of 1s is spanning over the period of 2 to 3 seconds. How can I fix this?

    I have read the MDN post about it, and I know it is still experimental stuff. But anyway, is there a workaround for this one?

    https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

    #175649
    Paulie_D
    Member

    Until we see it we can’t comment.

    Do you have a link or a reduced case Codepen.io example.

    #175652
    sqnkov
    Participant

    Here is a reduced case fiddle:

    http://jsfiddle.net/sqnkov/E22ZK/

    #175653
    Paulie_D
    Member

    Actually, I think FF is probably doing it right

    .fadeIn {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        animation-delay: 5s;
        animation-play-state: running
    }
    

    I’m not sure why you have multiple class all trying to do parts of the same thing

    #175656
    sqnkov
    Participant

    Well it’s not working for me though.

    I am using multiple classes because the delay is being applied to a single object only, and the .fadeIn animation is being used by multiple items which are not meant to be delayed.

    #175698
    Paulie_D
    Member

    But you are using this in the class…

    .fadeIn {
        animation-delay: 5s;
    }
    

    If you disable it…FF seems to co-operate

    http://jsfiddle.net/E22ZK/3/

    #175705
    sqnkov
    Participant

    Yes, I didnt check the main class. Thanks!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.