Answer 1

function Me(){
var Cm = document.getElementById("Cd");
Cm.style.webkitAnimationName += "a";
}

//put the -webkit-animation-name on tag as style="..." because in js you change its atrribute and not the css...

Answer 2

Pfffft
webkitAnimationName is ''
bc it's inside css rule style not js
#+#(&?+@
Ah well I'm bad at eng again -_-

Absolutely your original one is well and then you change to something worse

Cm.style.webkitAnimationName=getComputedStyle(Cm).webkitAnimationName+"a";

also what is "aa" in css tab for?

Answer 3

If you want to fix your problem and make your animation working, the real good answer is to not quote animation name in css, and not set the animation name property, even with an empty or another name ^^
+ Quotes are not valid, and broke the @keyframes declaration (unrelated identifier)
+ Setting a name, even an empty string, will make the css interpreter run once a no effect animation, and can not play it twice...

function Me(){
var Cm = document.getElementById("Cd");
Cm.style.animationName="aa";
}

#Cd{
width:30px;
height: 30px;
background: red;
animation-duration:6s;
animation-fill-mode:forwards;
}
@keyframes aa {
0%{ background: red; }
100%{ background: blue; }
}

Anyway, you doesn't need to put width and height in the @keyframes rules, as values are unchanged ;)

However, I would suggest to rather use css class to reach your goal, and be able more easily to play the animation

#Cd{
width:30px;
height: 30px;
background: red;
}
.anm {
animation-name:aa;
animation-duration:6s;
animation-fill-mode:forwards;
}
@keyframes aa {
0%{ background: red; }
100%{ background: blue; }
}

function Me(){
var Cm = document.getElementById("Cd");
Cm.className="";
setTimeout(()=>(Cm.className="anm"),0);
}

Notice that I delete the class attribute, and then I delay the assignation of the animation class name to allow the css engine to view two different states (if not async done, the css engine will see unchanged state and will not replay the animation)...