Question

I’m struggling in finding a non JS solution for my problem. Is there a way of activate a CSS transition on click and not on :hover or others?

Answer 1

One possibility: You can add a class that holds the transition on click. This is an example using jQuery – you can also achieve this programmatically using “raw” JavaScript only:

HTML container that should be animated

<div id="transtion"></div>

JavaScript

// bind click event to the element itself - but it can also be any other element that triggers this …
$('#transition').click(function() {
    // add the classname thats defined with the transition in your CSS
    $(this).addClass('translate_left');
});