Do you know what is CSS Prefixes 😮

Hi, coding people,

Hope you all doing amazing growth in your journey.

This post is part of our "20 days CSS animation"

20 Days of CSS animation post💪

🚩 Atul Prajapati 🇮🇳 ・ Jan 30 '21 ・ 1 min read

#css #html #beginners

In this post we are going to learn about CSS prefixes 😅 actually it's not an animation syntax. Its name of a solution, I mean there are some old browsers like internet edge, opera, etc these browsers can't load some CSS animations properly that's why in CSS there some prefixes like

• -webkit- (for old ios browsers)
• -ms- (for old Microsoft edge browsers)
• -moz- (for firefox old versions)
• -o- (for opera old browsers)

For latest browsers

• animation: sunrise 2s linear 0s infinite normal none;

Prefix for old edge browser

• -webkit-animation: sunrise 2s linear 0s infinite normal none;
• -ms-animation: sunrise 2s linear 0s infinite normal none;
• -moz-animation: sunrise 2s linear 0s infinite normal none;
• -o-animation: sunrise 2s linear 0s infinite normal none;

Now see this codepen project for real-life examples of CSS prefixes.

And if you guys interested in my free website templates please download them here 👉AtulCodex Marketplace 🏪.