Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content


What Is Transitions And How To Use It In CSS3?

Transitions, transforms and Animations :

When CSS3 was not introduced, for animation JavaScript was used. There are some new functionality added in CSS3; using which we can give some animation.

Transitions : CSS3 transitions allows you to change property values smoothly over a given duration.

Transition duration - It let the transition effect last for appropriate time.

Transition property - Give effects for defined duration

Transition timing function - It specifies the speed curve of the transition effect.

Also we can give external property like ease in out or linear.

Let’s see Example of transition :
We will give effect on img hover. Suppose we want to add background then let’s see how to define it :
<h1> This is Second Section Header</h1>
<div class= “image_main”>
<img src= “img_name.jpg”>

Transition, transform and animation works on position. To change some position in HTML, CSS provides some functions, using which we an apply many effects. Suppose we apply fix position, than image will fix on scrolling, too. Position relative defines a parent which work under boundary. Position absolute removes the element from the flow of the document and other elements will behave as if it's not even there whilst all the other positional properties will work on it. Other position is static.

Now we will define another class in image :
<div class= “img_hover”> hover div </div>

Go to browser and you will see that class is defined at bottom of the image. This is showing as default but you want to show this div when cursor is hovered on image with effects, too. Let’s see how to do that in CSS :
.image_main{position: relative; overflow: hidden;}
.img_hover{position: absolute;}

After refreshing, you will see in browser that division is not shown as we keep it hidden and text is also positioned as absolute. On removing hidden overflow, you will see div is reappeared. We use top, bottom, left, right to set the position.
.img_hover{position:absolute; top:0px, left:0px;}

You will see, div is come at top left corner of the image. Now to give background, width, and height :
.img_hover{position:absolute; top:0px, left:0px; background: black; width:100%; height:100%; display: block; color: white;}

Refresh browser, and see div is appeared on black background. Now if we want to give animation then how we will do it ?
.img_hover{position:absolute; top: -100%, left:0px; background: black; width:100%; height:100%; display: block; color: white;}
.image_main: hover .img_hover{top:0px;}

Check the effects in browser. Also to provide transition to it :
.img_hover{position:absolute; top: -100%, left:0px; background: black; width:100%; height:100%; display: block; color: white; transition: all .8s ease-in-out;}
.image_main: hover .img_hover{top:0px; transition: all .8s eas-in-out;}

Save it and check the animation effect in browser. You can change the time of transition for slow/fast movement. This way, you can give transition in top, bottom, left or right direction.


Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere