Transitions in CSS in Urdu/Hindi

Web Artificer

In this tutorial i will show you how to add transitions in your projects with the help of very simple and understandable project. #cssproperty #transition #webdevelopment #webartificer1

Transcript

00:00In today's lecture, we will see what are the transitions in CSS and how we can use those transitions to create interactivity in our CSS page.

00:14First of all, let's take a table and give it a class of container.

00:21Sorry.

00:27We have taken a class and let's start it.

00:33Because we have a class and we use it with a dot in CSS.

00:39So we give it a specific width and height.

00:46Let's set its width and height by color.

00:53Yellow.

00:56So we give it a property of transition.

01:04In the name of width, transition name.

01:08And give it a time of transition, duration of transition.

01:15Because we will have 3 seconds.

01:18So how do we use it?

01:21When it is hovered.

01:26When this box is hovered, its width and background color will change.

01:32So we set it.

01:35Use container.

01:37And use hover class.

01:42So when it is hovered, we will increase its width by 600 pixels.

01:51And we will change its background color to red.

01:58Let's run the code and check.

02:05So this is the transition we have.

02:09In CSS.

02:12We can make a lot of changes in it.

02:16As needed.

02:18So this was our transition lecture.

02:20We will meet in our next lecture.

02:23Till then take care.

02:25Allah Hafiz.

Category

Transcript

Be the first to comment

Recommended