CSS - <p> leaving a trail when sliding

问题

I've a <p> tag and when it starts sliding from left to right it leaves a kind of trail through the screen. I've never seen anything like this before.

I'm animating it using jQuery:

$(document).ready(function(){
$(".choosenHero").animate({
 "right": "300px"
}, 3000);
});

and here is the screenshot:

回答1:

You might try using simple CSS transitions rather than jquery. As jquery does animation by changing css properties and is not the same thing.

So use jquery to add a class which has the end state of say:

.moved{
    left: 300px;
}

and on the initial state of the paragraph use something like:

.moving-object{
    position:relative;
    transition: left 2s;
    left: 0px;
}

来源：https://stackoverflow.com/questions/20404364/css-p-leaving-a-trail-when-sliding