rgba() is a function that calculates the color and transparency for an item, it is very useful when you want to control the color and the alpha of an item, especially if you do not want to totally transparent. Being a function, you are telling the browser what color and transparency exact you want to draw the item, this is closer to JS than CSS.
On the other hand, “transparent” is a CSS property that identifies an item will be completely transparent, without making calculations of color and alpha. Being a CSS property and not a function, each browser applies it in a different way, so it would differ much to the method used by the browser to apply this property.
EDIT
Ok, you say that i contradict that in my answer:
transparent
Fully transparent. This keyword can be considered a shorthand for
transparent black, rgba(0,0,0,0), which is its computed value.
Well, i dont contradict that. One thing thing is the specification of the W3C standard, and another thing is the implementation of that standard by developers of different browsers. I will not break the code of IE to prove what I’m saying, because it’s a bit illegal, directly ask the guys at Microsoft to see their answer.
What I’ve told you is that they are browsers that do not handle transparent and rgba(0, 0, 0, 0) in the same way. That’s because the transparent property is much older than the rgba(0, 0, 0, 0) function (you like that more than rgba ()?), And most likely, while for IE have developed an effective method for rgba (r, g, b, a), they are still using the old method with the transparent property.
One thing you always have to keep in mind is that no web browser meets the W3C standards to 100%, that is why in most of the new property must be added the specific extension of the manufacturer (moz- webkit-, etc)
Think why it is so absurd to write the same thing four times, when everything would be solved using the standard property, and yourself will answer because it is not the same to use transparent and rgba (0, 0, 0, 0) in IE.