why only upper object is affected by css animation?
July 25, 2014 12:00 AM
1. I have 4 objects (without any transitions, delays)
Page1:
-img1
-img2
-img3
-img4
2. I have animate css
3. I assign certain classes to objects (animated zoomIn)
4. When I playback page it is only uper object (img4) affected properly by animation.
img1-3 just appears with delay when animation for img4 finished.
5. If I rearrange
Page1:
-img4
-img2
-img3
-img1
img1 will be affected and so on.
Why is it so?
Discussion (2)
Okay, we've looked at HTML and traced it down to the issue with DOM object creation and image loading timeline.
Here's the timeline:
1. Page loads
2. Trivantis.js starts building elements (images)
3. Elements are animated immediately (because they have inline classes)
4. Image content is not loaded immediately, so empty elements are animated and the image simply pops in at the end.
So ideally the animation should start after the image is loaded, not just after the IMG element is created. Potential solutions:
- check for image loading, animate via JS, not CSS
- preload images (e.g. by placing them on a previous page and hiding)
Hope this helps.
Discussions have been disabled for this post