llamar una funcion css con javaScript

[dacroma]

Buenos dias compañeros del foro.
Tengo una pregunta.
tengo un documento HTML como el siguiente:

Código HTML:

<!-- escribire unicamente la parte importante->
<div id="cuadroAN">
CONTENDIO
</div>
<input type="button" value="Aplicar Estilo" id="boton">
 

Le aplico estilos con css:

Código CSS:

#cuadroAN{
-webkit-animation-name:an;
-webkit-animation-duration:1s;
}
 
@-keyframes an{
0%{
width:0px;
height:0px;
}100%{
width:300px;
height:300px;
}
}
 

Y quiero llamar la animacion del documento .CSS desde el documento .JS. Algo asi:

Código Javascript:

function inicio(){
var boton=document.getElemenById("boton");
boton.click.funcionAN();//cuando hagamos click en el boton llamar a la funcion funcionAN().
}
 
function funcionAN(){
//obtener la animacion y hacer que funcione
}
 

Muchas gracias a aquel que decida ayudarme.
Buen dia.

[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