What's the difference between rgba(0,0,0,0) and transparent?

Question

In one of my other questions, the solution to fixing a rendering issue was by using the value rgba(255, 255, 255, 255) instead of transparent. We

Answer 1

In my opinion, it is not good to use the same id twice, whatever you are doing, it is meant as an identifier. I also do not find it weird that they both show the animation, since both of them have the same id that match the animation in the css.

#spinme{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    display:inline-block;
    position:relative;
    left:0;
    top:0;
    margin:0.2rem;
    width:0.8rem;
    height:0.8rem;
    border:0.2rem solid black;
    border-radius:0%;
    outline: 1px solid rgba(0,0,0,0);
    transform:rotateZ(0deg);

}

#spinme:nth-of-type(1){
    animation: spin infinite 4s;
}

if you do this, only one wobbles, and it makes perfect sense to me. Perhaps it does not answer your question about the transparent issue, but I am not sure if that is really the issue anyways.

edit No matter which color I try, transparent or rgba(0,0,0,0) in any combination they both animate on Safari.