How to prevent recalling my css animation after using ':active' selector?

user_7196084 0
Viewed 325

I would like to add a bouncing animation to my button. Button should enter the screen with this animation. It works. But after that I added an :active selector. 

#button:active{
 transform: translateX(20px);
}

And I doesn't work. It just ignores this selector. But I figured out that after adding an animation name to this selector it works. Only then but the problem is that it repeats my bouncing animation as well. It can be any name. Even a name of an animation which doesn't exist. For example:

#button:active{
 transform: translateX(20px);
 animation-name: not_existing_animation;
}

And that's why I need help. I made a fiddle to let you better see my problem: https://jsfiddle.net/gfd2pjbz/3/

animation css jquery
3 Answers

I found a solution about this animation issue. I don't know is it work for you. But I found few coding issue in your Jsfiddle.

First codding issue.

You haven't flow the W3C rules. button is a closing tag element. It's not none closing tag element like <img /> <br /> etc.

Second codding issue.

You have to forgot to write position direction CSS property. position: fixed | absolute | sticky need to set left | right | top | bottom direction.

I tested your fiddle many times why not :active pseudo-class not work after clicked. Problem found from your first animation. animation and bounceInDown classes are contain the transform property. Your animation will not work until you remove the animation and bunceInDown classes. So I need to write a function for remove those classes.

$(function(){
    $('#button').on('click', function(){
        $(this).removeClass('animated bounceInDown');
    });
});

When I removed those classes I seen button is disappeared because of #button opacity: is 0;. So I need opacity: 1; in #button.

$(function(){
    $('#button').on('click', function(){
        $(this).addClass('opacity-visible');
    });
});

Now found an another issue. Issue is first click :active animation not working. Because of the first click didn't allow transform property until animation classes are removed. Then need add a class when removing those animation classes. After added new class the :active animation will work.

$(function(){
    $('#button').on('click', function(){
        $(this).addClass('active');
    });
});

Now need to set a timeOut function for remove the active class for button back to original place for next clicked animation. Now I can write all function together.

$(function(){
    $('#button').on('click', function(){
    $(this).addClass('active opacity-visible');
    $(this).removeClass('animated bounceInDown');
    setTimeout(function(){
        $('#button').removeClass('active');
    }, 2000);
  });
});

Checked the snipped. I hope it will help you to perform the best solution.

setTimeout( function(){
$("#button").addClass("animated bounceInDown");
}, 1000);

$(function(){
 $('#button').on('click', function(){
   $(this).addClass('active opacity-visible');
    $(this).removeClass('animated bounceInDown');
    setTimeout(function(){
     $('#button').removeClass('active');
    }, 2000);
  });
});
*:focus{
    outline: none !important;
}
*{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
#button {
  position: fixed;
  background-color: green;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  color: white;
  cursor: pointer;
  height: 20%;
  left: 0;
  width: 20%;
  top: 0;
  opacity: 0;
}

#button:active{
  background-color: red;
  transform: translateX(50%) !important;
 /* animation-name: not_existing_animation; */
}
#button.opacity-visible{
  opacity: 1;
  transition: transform 0.3s ease-in-out 0s;
}
#button.active{
  background-color: black;
  transform: translateX(50%) !important;
}

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */

.bounceInDown {
  animation-name: bounceInDown;
  opacity: 1!important;
}


.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button">Click Me</button>

I suggest you to don't write :active css for this type of animation. More specification here on MDN.

user_36041880

I found a super cool solution for you.

First see the preview: https://codepen.io/ziruhel/pen/aVjGMY

Separate initial opacity to a class and add this class to your button.

Like: 

<button id="button" class="visibility"/>

And CSS:

.visibility {
  opacity: 0;
}

Now remove the animation and your desire transform when button is :active by this code: 

#button:active {
  transform: translate3d(20px, 0, 0);
  /* transform: translateX(20px); you can also use this */
  animation-name: none; 
}

It will now translate to right, but bouncing still remain. To remove this bouncing do this: 

$(document).on("click", "#button", function() {
  $(this).removeClass("animated bounceInDown visibility");
});

It will remove animation that you added when first load or initialize.

user_88505120
Related