To my understanding these are just to ensure browser compatibility but I haven’t found an in-depth explanation anywhere. Can someone briefly explain these and their uses? Thanks!
Yeah, it’s only about browser compatibility. You don’t need to bother about it. These days you can just use some of tools to make your code browser compatible, you don’t need to do that manually (see autoprefixer for example).
When CSS features are being tested by a browser, or are specific to a particular browser, the browser vendor will prefix those properties. It’s to allow properties to be used in a browser when that browser isn’t quite ready to (or can’t, because they aren’t CSS spec) fully implement those properties. The -moz, -webkit, etc thing is fairly recent to keep some level of sanity: browser-specific or experimental properties didn’t used to be prefixed and it was a bit of a nightmare.
As @ace1122sp says, it should be done automatically (though there are still a very small number of very specific situations where prefixes have to be used to get around browser issues).