CODEWITHSUNDEEP
javascriptjquerycssanimationcss-animations
Seamus Nanatchk
Seamus Nanatchk

Reputation: 237

Why is my animation doing what I don't expect?

I'm trying to animate card dealing with CSS and jQuery.

I have positioned a single .png image of a card at the bottom of the window, and I want it to respond to a click event by spinning and moving to the top of the screen. While the card does do that, it doesn't stay at the x,y coordinates when the animation is done. It actually re-positions itself where it started at the bottom of the screen.

  1. Why?
  2. Am I just going about it stupidly?
@-webkit-keyframes deal {

from {
}

to { 
    left: 0px;
    top: 0px;
   -webkit-transform: rotate(720deg);
    }
}

img {
position: absolute;}

.card {
    position: absolute;
    -webkit-animation: deal .2s 1 ;
    -webkit-animation-play-state: running;
    -webkit-animation-timing-function: cubic-bezier(.1,.35,.1,.85);
}

<img class='' id='card' src='img/b2fv.png' />

function placeElements(){
    var wh = $(window).height();
    var ww = $(window).width();
    var ch = $('#card').height();
    var cw = $('#card').width();
    var cx = (ww - cw)/2;
    var cy = (wh - ch);
    $('#card').css('left',cx); 
    $('#card').css('top',cy);
}

$(document).ready(function(){

    placeElements();

    $(window).resize(function () {
        placeElements()
    });

    $("#card").on('click', function(){
        $(this).attr('class','card');
    });

});

Upvotes: 1

Views: 83

Answers (2)

paulitto
paulitto

Reputation: 4673

You can also do this without keyframes, by just using transition property

#card.card {
    left: 10px;
    top: 0px;    
    -webkit-transform: rotate(720deg);
}
#card {
    -webkit-transition: all 5s;
    position:absolute;
}

demo

Upvotes: 2

Harry
Harry

Reputation: 89780

You need to set animation's fill mode to forwards. Doing this will make the animated element hold the position of its final keyframe after the animation is complete.

From this MDN Link

Fill mode: forwards

The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and animation-iteration-count

.card {
    position: absolute;
    -webkit-animation: deal .2s 1 ;
    -webkit-animation-play-state: running;
    -webkit-animation-timing-function: cubic-bezier(.1,.35,.1,.85);
    -webkit-animation-fill-mode: forwards; /* Add this and also the corresponding browser specific versions */
}

Demo

Upvotes: 1

Related Questions