I have a problem for override CSS style on element that has class.

I'm using keyframe animation CSS class.

Check this fiddle out for live action :

HTML :

<div id="sidebar" class="animation">this is sidebar</div>
<div id="trigger">this is trigger</div>

CSS :

#sidebar {width:225px; height:100%; background:red; position:fixed; top:0; left:0; display:none; }
#trigger {float:right; }
.animation {animation-duration: 0.5s; animation-fill-mode: both; }

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }

}

.slideInLeft {
  animation-name:slideInLeft;
  display:block !important;
}

JS :

$(document).ready(function() {
    $("#trigger").on("click", function() { // trigger for opening #sidebar
        $("#sidebar").addClass("slideInLeft"); // addClass, so it animated
    });

    $("#sidebar").on("mousemove", function(e) { // move #sidebar according mousemove
        e.preventDefault(); // reset default behavior
        $(this).css("transform", "translate3D(" + e.pageX + "px, 0, 0)") 
        // add style for move #sidebar, look at this element, not working. what's wrong here?
    });
});

Why #sidebar not moving? the CSS style already add to it. but not moving.

What's wrong with my code?

thanks in advance...

I have a problem for override CSS style on element that has class.

I'm using keyframe animation CSS class.

Check this fiddle out for live action :

HTML :

<div id="sidebar" class="animation">this is sidebar</div>
<div id="trigger">this is trigger</div>

CSS :

#sidebar {width:225px; height:100%; background:red; position:fixed; top:0; left:0; display:none; }
#trigger {float:right; }
.animation {animation-duration: 0.5s; animation-fill-mode: both; }

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }

}

.slideInLeft {
  animation-name:slideInLeft;
  display:block !important;
}

JS :

$(document).ready(function() {
    $("#trigger").on("click", function() { // trigger for opening #sidebar
        $("#sidebar").addClass("slideInLeft"); // addClass, so it animated
    });

    $("#sidebar").on("mousemove", function(e) { // move #sidebar according mousemove
        e.preventDefault(); // reset default behavior
        $(this).css("transform", "translate3D(" + e.pageX + "px, 0, 0)") 
        // add style for move #sidebar, look at this element, not working. what's wrong here?
    });
});

Why #sidebar not moving? the CSS style already add to it. but not moving.

What's wrong with my code?

thanks in advance...

• javascript
• jquery
• html
• css

• you just need to add this jquery in to your code $(this).removeClass('slideInLeft'); under mousemove function – Iqbal Pasha Commented Mar 18, 2016 at 6:25

4 Answers 4

animation-fill-mode: both;

Means that the sidebar will keep the style while animation end! If you remove animation-fill-mode style everything's ok.

more information for animation-fill-mode.

It is because div have slideInLeft class. Remove it on mouse move.

$(this).removeClass('slideInLeft');

Fiddle

$("#sidebar").on("mousemove", function(e) { 
   e.preventDefault(); 
   $(this).removeClass('slideInLeft');
   $(this).css("transform", "translate3D(" + e.pageX + "px, 0, 0)") 
});

the animation in the class slideInLeft will prevent your updates from showing.

if you change the css update code to this you'll see results. You still need the display:block so just removing the class would not work.

$(this).removeClass('slideInLeft');
$(this).css({"display":"block","transform": "translate3D(" + e.pageX + "px, 0, 0)"}) // add style for move #sidebar, look at this element, not working. what's wrong here?

changes applied https://jsfiddle/e9tzurnf/

You need to remove the class slideInLeft after the animation is plete.

$("#trigger").on("click", function() { // trigger for opening #sidebar
    $("#sidebar").addClass("slideInLeft block"); // addClass, so it animated
    setTimeout(function(){
            $("#sidebar").removeClass('slideInLeft');
    }, 500);
});

Also add a different class to keep the display:block.

.block{
    display: block !important;
}

DEMO