i’m trying trigger complete css3 animation single click on anchor element. current version working (based on lots of searching here , on google), requires 2 clickable elements present.
here’s have far:
http://codepen.io/professorsamoff/pen/rvnodv
as you’ll see, jquery pretty typical:
$('a.puff').click(function() { $('a.puff').addclass('active'); $(this).removeclass('active'); }); i know i’m missing pretty simple, appreciated.
thanks, tim
css alone doesn't provide mechanism act on keyframe animation/transition end, fire javascript-detectible event, explained here.
your repeatable puff animation :
$('a.puff').each(function() { $(this).attr('data-puff', $(this).text()); }).on('click', function() { var $a = $(this).addclass('active').one('webkitanimationend oanimationend msanimationend animationend', function() { $a.removeclass('active'); }); }); as far i'm aware simple can make it.
