How can I make this Jquery animate() with css3 animations?

Question

This is my jfiddle

And this is my actual code

$card.animate({
            left: "1000px"
        }, 500, function(){
            $card.hide(500);
        });

(I dont know why 'left' didnt work on jfiddle) Basically ive got a container with 5 $cards there. When user swipes the card (already implemented) the animate() is triggered and the card slides to the rightand then disappears. How can I implement such thing in CSS animations instead of using Jquery? Ive read that CSS animations run faster (and I proved it on my mobile device, the hide() runs really slow)... Any help or advice will be appreciated

Answer 1

1. Your left didn't work, because you need to set position to a value other than static (which is default) for it to work.
2. As for using CSS, you can add a class instead of animating in jQuery. This class can change the transition which you can set in css as per your requirements.

 var my_div = $('.myelement'); my_div.on('click', function() { var $this = $(this); $this.addClass("gone"); setTimeout(function(){ $this.hide(); }, 600 ); }) 

 #mywrapper { overflow: hidden; } .myelement { height: 200px; width: 200px; background-color: red; opacity: 1; position: relative; transition: all 0.5s ease; opacity: 1; left: 0px; } .myelement.gone { left: 500px; opacity: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="mywrapper"> <div class="myelement"> Click me please </div> </div> 

Answer 2

First of all, create a class that you can trigger via jQuery that will have the animation.

Then, using you have two options: transition or animation . Transitions are simpler and more direct, but you can do more with animations.

Here is how I would suggest to do it: a transition for the movement, and an animation to recreate the hide() function.

@keyframes hide {
    99% { display: auto; }
    100%{ display: none; opacity: 0; }
}
.myelement {
    transition: all .5s;
    position: absolute;
    left: 0;
}
.myelement.toLeft {
    left: 2000px;
    animation: hide .5s 1 forwards;
}

To trigger it, simply do this:

$(".myelement").addClass("toLeft");

Here is a working JSFiddle .

---

And like @MohitBhardwaj said, it is necessary for you to set position to absolute , relative , or static in order for positioning (ie, the left property) to work.

It's also important to note that a transition needs an initial value . I added left: 0 to do this. Otherwise, (with a CSS transition) it would simply jump to 2000px because there is no starting point.

Also, because 2000px as a left value is very large, I suggest you change the parent element's scroll to overflow: hidden , so that the extraneous scroll bar doesn't appear.