Forums

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

Home Forums CSS Css Animation

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #192736
    Kuzyo
    Participant

    Hi guys.
    Have some problem in understanding css animation. Have found great example on this site(hover over bookshelf) – http://wonderfulcolorado.com/
    create a demo http://codepen.io/Kuzyo/pen/pvRdao but my falling books first goes down and only then fall. If I use hover without transition everything fall nice but very fast. Can somebody explain where is my mistake? Thanks

    #192745
    Scott
    Participant

    @Kuzyo I can see some issues but one main issue that stuck out for me is you are not using any kind of animation delay therefore all your books fall at once try adding -webkit-animation-delay on each item and make each additional item more delayed then the previous. You might also want to throw in some -webkit-translate in with it. ex:

    .book1{
    -webkit-animation-delay:0.2s;
    }

    .book2{
    -webkit-animation-delay:0.4s;
    }

    .book3{
    -webkit-animation-delay:0.6s;
    }

    #192747
    shaneisme
    Participant

    @scottmarshall993 – be sure to always put in the actual W3C spec property into your code. Just putting in the -webkit prefix won’t help you once it is eventually depreciated.

    In this case though, as you can see from @bearhead, just increasing your animation time is all you need in this instance. It will also give you a more natural animation as in reality all the books will start moving at the same time.

    #192799
    Kuzyo
    Participant

    Thanks guys.

    @bearhead
    looks ok, but if we removed cursor from animation all books stay stright up at once (

    #192804
    Kuzyo
    Participant

    here I tried with only one image http://codepen.io/Kuzyo/pen/emgrRE
    image first goes down and only then lay on the left. Why ?.Can’t uderstand. Appreciate any help

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