css - what should be transition in css3 -
<html> <head> <style> <!-- need in css transition of background-image --> body{ -webkit-transition:background-image 5s ease-in-out; -moz-transition:background-image 5s ease-in-out; -o-transition:background-image 5s ease-in-out; -ms-transition:background-image 5s ease-in-out; transition:background-image 5s ease-in-out; } </style> </head> <body> </body> </html> need background-image transition flash
need flash background-image effect
i tried too
$('body'). animate({ opacity: 0 }, 'slow', function () { $(this).css( { 'background-image': 'url(\''+jdata.imageurl+ '\')' }).animate({ opacity: 1 }); });
it's not possible transition background-image, transitions can transition properties have implicit, or explicit, numerical scale; example such properties width, height, opacity , on.
this same reason it's not possible transition to, or from, display: none because there 2 states (visible , non-visible) no possible interim steps between two.
if want transition between 1 background-image , another, you'd need stack multiple elements in same space , fade element(s) containing background-image in/out using either css transitions or animations.
you could, alternatively, transition background-image-position properties give impression of carousel, example, since property uses css length units, can – of course – transitioned smoothly.
Comments
Post a Comment