Learn, Share, Build

Assuming this (from your CSS)...

<div class="clicker">[Your Content]</div>
<div class="circle">[Your Content]</div>

WITH PURE JAVASCRIPT:

<div class="clicker" onclick="this.nextElementSibling.classList.toggle('paused');">[Your Content]</div>
<div class="circle">[Your Content]</div>

WITH JQUERY:

$('.clicker').click(function(){
    $(this).next('.circle').toggleClass('paused');
});

You haven't post your html, so the JavaScript/jQuery selectors I'm using are base on your CSS. For a more specific answer with the best selectors, you should show your html.

EDIT:

I've just realized that with this solution you could have a problem with your CSS, because .circle styles prevails over .paused, so the class is been toggled but the styles aren't changing. You can easily solve it adjusting your CSS...

.clicker + .circle {
    -webkit-animation: rotor 1.5s linear 0s infinite normal;
    -mox-animation: rotor 1.5s linear 0s infinite normal;
    -o-animation: rotor 1.5s linear 0s infinite normal;
    animation: rotor 1.5s linear 0s infinite normal;
}
.paused {
    -webkit-animation-play-state: paused !important;
    -moz-animation-play-state: paused !important;
    -o-animation-play-state: paused !important; 
    animation-play-state: paused !important;
}

I hope it helps

This is not possible in CSS, however if you are interested in a JavaScript example:

$(element).on('click', function () {
    if ($(target).hasClass('paused'))
    {
        $(target).removeClass('paused');
    }
    else 
    {
        $(target).addClass('paused');
    }
});

Replace element with the button or anchor that activates the class removal / addition. And replace target with the element that should animate.

This solution requires jQuery.

var active = document.querySelector('.active'); 
var div = document.querySelector('.wrap'); 
var hasAnimationPaused = false; 
var aniamtionPausedClass = 'paused' 
 
div.className += ' circle'; 
active.addEventListener('click', function(e) { 
  var classNames = div.className.split(' '); 
  if (!hasAnimationPaused) { 
    div.className += ' ' + aniamtionPausedClass; 
    hasAnimationPaused = true; 
  } else { 
    classNames.splice(classNames.indexOf(aniamtionPausedClass), 1); 
 
    div.className = classNames.join(' '); 
    hasAnimationPaused = false; 
  } 
})

.wrap { 
  color: black; 
} 
@keyframes rotor { 
from { 
  color: red; 
} 
50% { 
  color: yellow; 
} 
to { 
  color: blue; 
} 
} 
.circle { 
    -webkit-animation: rotor 1.5s linear 0s infinite normal; 
    -mox-animation: rotor 1.5s linear 0s infinite normal; 
    -o-animation: rotor 1.5s linear 0s infinite normal; 
    animation: rotor 1.5s linear 0s infinite normal; 
  } 
  .paused{ 
    -webkit-animation-play-state:paused; 
    -moz-animation-play-state:paused; 
    -o-animation-play-state:paused;  
    animation-play-state:paused; 
}

<div class="wrap"> TEst Test</div> 
<button class="active">CLick</button>