llamar una funcion css con javaScript

[Alexis88]

Lo que tienes en la hoja de estilos no es una función, sino una animación. Tampoco es correcta la forma en que pretendes aplicar el evento click, para eso existe el método addEventListener.

Lo que podrías hacer es aplicar la animación al elemento asignándola al atributo -webkit-animation-name, el cual tomaría la forma camelCase:

Código Javascript:

var boton = document.getElementById("boton");
boton.addEventListener("click", function(){
    this.style.animationName = "an";
    this.style.animationDuration = "1s";
    
    //Para Google Chrome
    this.style.webkitAnimationName = "an";
    this.style.webkitAnimationDuration = "1s";
    
    //Para Mozilla Firefox
    this.style.mozAnimationName = "an";
    this.style.mozAnimationDuration = "1s";
}, false);
 

Saludos