CODEWITHSUNDEEP
javascriptjquerycss
obreezy
obreezy

Reputation: 333

Trigger same CSS animation on every click

I'm trying to trigger a CSS animation onclick, but have it restart after each click. I know I can toggle the animation on and off, but I'd like to just trigger the animation every time the button is clicked. Also, initially the CSS animation should not run. Only run when clicked.

Here's my pen. http://codepen.io/omarel/pen/JRwpZp

HTML :

<a href="#" class="addtocart">click me</a>

Jquery :

 $('.addtocart').click(function () {  
     $(this).addClass('on');
 });

CSS :

.addtocart {
    position: relative;
}

    .addtocart.on {
        -webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
        -moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
        -ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
        -o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
        animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
    }

@keyframes cartbtnFade {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    10% {
        transform: translateY(-100%);
    }

    15% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-50%);
    }

    40% {
        transform: translateY(0%);
    }

    100% {
        opacity: 1;
    }
}

Upvotes: 9

Views: 14177

Answers (6)

sebilasse
sebilasse

Reputation: 4618

As Jacob said there is no need for javascript. You can use CSS :focus or :target as in this codepen https://codepen.io/sebilasse/pen/rrOYQj?editors=1100

- .root { appearance: none; position: relative; width: 120px; height: 50px; transition: all .1s linear; transform: translate3d(0, 0, 0); }

.animation {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  outline: none;
}

@keyframes pulse {
    0%   { opacity: 0; box-shadow: 0 0 0 1px red; }
    40%  { opacity: 0.8; }
    80%  { box-shadow: 0 0 0 80px red; }
    99% { opacity: 0; box-shadow: 0 0 0 0px red; }
}

.root:hover ._focus:focus::after,
.root:target ._target::after {
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    box-shadow: 0 0 0 0px red;
    border-radius: 50%;
    z-index: 1;
    left: 20px;
    top: 25px;
    transform: perspective(1px) translate(-50%, -50%);

  animation-name: pulse;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}


<h3>crossbrowser animation onClick hacks</h3>
<button class="root">
  <div class="animation _focus" tabindex="0" onanimationend="this.blur()">    
</div>
  contra: steals focus
</button>
<button id="btn_1" class="root">
  <a class="animation _target" href="#btn_1"></a>
  contra: needs id
</button>

Upvotes: 0

yusuf hari
yusuf hari

Reputation: 1

I have a solution to remove your on class every second:

var $post = $(".addtocart");

setInterval(function() {
    $post.removeClass("on");
}, 1000);

http://codepen.io/anon/pen/NRZykG

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You could use the .delay() and .queue()/dequeue() if you want to add/remove class :

$('.addtocart').click(function () {
  $(this).addClass('on').delay(500).queue(function(){
    $(this).removeClass('on').dequeue(); 
  });
});

Hope this helps.

$('.addtocart').click(function () {
  $(this).addClass('on').delay(500).queue(function(){
    $(this).removeClass('on').dequeue(); 
  });
});
.addtocart {
  position:relative;
  width:100px;
  display:block;
  background-color:#000;
  color:#fff;
  padding:10px;
  text-align:center;
}
.addtocart.on {
  -webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
  -moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
  -ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
  -o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
  animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}

@keyframes cartbtnFade {
  0% {
    opacity: 0;
    transform:translateY(-100%);
  }
  10% {
    transform:translateY(-100%);

  }
  15% {
    transform:translateY(0);
  }
  30% {
    transform:translateY(-50%);

  }
  40% {
    transform:translateY(0%);

  }
  100% {
    opacity: 1;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="addtocart">click me</a>

Upvotes: 1

Brian
Brian

Reputation: 1893

You can listen to when the animation ends, then remove the class 'on'

var animationEvent = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';
$('.addtocart').click(function () { 
  $(this).addClass('on');
  $(this).one(animationEvent, function(event) {
    $(this).removeClass('on')
  });
}); 


$('.addtocart').click(function () { 
  $(this).addClass('on');
  $(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {
    $(this).removeClass('on')
  });
}); 
.addtocart {
		position:relative;
  width:100px;
  display:block;
  background-color:#000;
  color:#fff;
  padding:10px;
  text-align:center;
	}
	.addtocart.on {
    -webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
    -moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
    -ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
    -o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
    animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
	}

@keyframes cartbtnFade {
  0% {
    opacity: 0;
    transform:translateY(-100%);
  }
  10% {
  	transform:translateY(-100%);

  }
  15% {
	  transform:translateY(0);
	}
	30% {
	  transform:translateY(-50%);
	  
	}
	40% {
	  	transform:translateY(0%);

	}
  100% {
    opacity: 1;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="addtocart">click me</a>

Upvotes: 8

Jacobalo
Jacobalo

Reputation: 363

Instead of using an on click event, use :focus.

.addtocart:focus {
    -webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
    -moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
    -ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
    -o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
    animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}

Now, whenever an element with the .addtocart class is focused (or clicked on), it will have those styles. When you click away, the styles will go away.

Upvotes: 2

Rahul Singh
Rahul Singh

Reputation: 19622

You can add and remove the css class on every click and inorder for you to run the css only while clicking, do this onload not on ready

Example .addClass and .removeClass

Upvotes: 0

Related Questions