CSS Animation: Move & Rotate a Div Easily! 🚀 #shorts #coding #css #beginners #animation

Kya aap seekhna chahte hain ki HTML aur CSS ka use karke ek beautiful animated box (div) kaise banate hain? To yeh video aapke liye hai!
Is short video mein, maine step-by-step dikhaya hai ki kaise aap simple code likh kar ek static div ko ek awesome animation mein badal sakte hain. Video ke starting mein aapko animation ka preview dikhega, aur uske turant baad humne uska actual HTML aur CSS code share kiya hai jise aap apne project mein copy-paste kar sakte hain.
Glow-up your web development skills i n just a few seconds! 💻✨
What you will learn in this video:

1.How to structure a box using HTML div

2.Styling and centering the box with CSS

3.Adding smooth transitions and keyframe animations
#shorts #frontendcourse #coding #for biggeners #learncoding #css #animationī

💻👉Use css code from here :-

body{
background-color: black;
}


#di{
background:red;
border: solid ;
border-width: 2px;
border-color: transparent ;
height: 100px;
width: 100px;
position: fixed;
top: 100px;
animation-name: col1;
animation-duration: 6s;
animation-delay: 0s;
animation-iteration-count: 2;
animation-timing-function: ease-in;
color: white;
text-align:center;
font-size:18px;
}

@keyframes col1{
0% {transform: translateX(-150%) scale(1) rotate(0deg);
background-color: red;
color: white;
}
30% {transform: translateX(40vw) scale(1) rotate(0deg);
background-color: yellow;
color: blue;
}
45% {transform: translateX(40vw) scale(1.5) rotate(360deg);
background-color: yellow;
color: blue;
}
55% {transform: translateX(40vw) scale(1.5) rotate(360deg);
background-color: green ;
color: white;
}
65% {transform: translateX(40vw) scale(1.5) rotate(0deg);
background-color:green ;
color: white;
}
80% {transform: translateX(40vw) scale(1.5) rotate(0deg);
background-color: purple;
color: aqua;
}
100% {transform: translateX(150vw) scale(1) rotate(0deg);
background-color: purple;
color: aqua;
}
}

Видео CSS Animation: Move & Rotate a Div Easily! 🚀 #shorts #coding #css #beginners #animation канала FrontEnd Verse