CSS transition Property | CSS Transitions - CSS Tutorial 90

Notes for You:: CSS transition Property | CSS Transitions - CSS Tutorial 90
- Transition means changing the state of an HTML element smoothly.
- Using CSS transition properties instead of suddenly changing the state of an HTML element; we can change the state of an HTML element smoothly

Applying CSS transitions:
transition-property:
- comma separated one or more CSS properties to be transitioned , none, all
transition-duration:
- comma separated one or more time in ms/s taken to complete the transition
transition-timing-function:
- comma separated one or more behaviors of transition (linear, ease-in, ease-out, ease-in-out)
transition-delay:
- comma separated one or more time delays in ms/s to begin the transition

transition:
- comma separated one or more
[transition-property transition-duration transition-timing-function transition-delay]

Note:
- CSS Transitions allow us to change the state of an HTML element from initial state to the final state; does not allow controlling in-between states; to add and control in-between states we take help of CSS Animations.

Example Code:

div
{
width:100px;
height:100px;
background-color:orange;
transform:perspective(400px) rotateZ(0deg);

transition-property: width,height,background-color,transform;
transition-duration:1s,1s,1s,1s;
}

div:hover
{
width:200px;
height:200px;
background-color:red;
transform:perspective(400px) rotateZ(360deg);
}
Note:
- on mouse over of div elements rotate.

=========================================

Follow the link for next video:
CSS Tutorial 91 - CSS Animations Tutorial | CSS animation Property

Follow the link for previous video:
CSS Tutorial 89 - CSS transform-origin Property

=========================================

CSS Tutorials Playlist:-

=========================================
Watch My Other Useful Tutorials:-

HTML Tutorials Playlist:-

JavaScript Tutorials Playlist:-

jQuery Tutorials Playlist:-

=========================================

► Subscribe to our YouTube channel:

► Visit our Website:

=========================================
Hash Tags:-
#ChidresTechTutorials #CSS #CSSTutorial

[ChidresTechTutorials]

SUBSCRIBE, SHARE & SUPPORT:
VISIT & LEARN AT FREE OF COST:

[kirthiramakrishna]

One of the best video to understand transform, transition..

[piyushpathak]

Nice content .
Sir I want videos on css flexbox and grid.

[darkwerl]

Hi I been seen your videos, I want to extract assets from a unity game but I don't know how to make a c++ to extract them

[vortex]

Whenever I put transitions with the hover element, the transitions stop when the element moves away from the mouse pointer.
SO, is there a way by WHICH I can make a transition continue till upto its end even after once hovered over the element and then removed

[shakib_]

why you dont use popular code editor like vs code? your videos are awesome.

[devShahriar]

sir, you are a very good teacher sir i want to talk to you for once . if you can please give your social media account so that we can follow you