- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
@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;
}
@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.
Thanks guys.
@bearhead looks ok, but if we removed cursor from animation all books stay stright up at once (
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