CSS Tansform and Transition

What is CSS Transition?

CSS transition is used to make changes in CSS properties happen smoothly over a specified period of time. Without a transition, a property change happens immediately.

For example, when we move the mouse over a box, its size, color, or position can change smoothly using a transition.

.box {
    width: 100px;
    height: 100px;
    background-color: orange;
    transition: transform 0.5s,background-color 0.1s;
}

.box:hover {

         backgroung-color:green
}

Important Transition Properties

transition-property - Specifies the CSS property that should change
transition-duration - Specifies how long the transition takes
transition-timing-function - Specifies the speed pattern of the transition
transition-delay - Specifies how long to wait before starting the transition
transition - Shorthand property for all transition properties

What is CSS Transform?

CSS transform is used to change the position, size, angle, or shape of an element without changing the normal layout of the page.

The commonly used transform functions are:

• translate() – moves an element
• scale() – increases or decreases its size
• rotate() – rotates an element
• skew() – slants an element

transform: translate(50px, 20px);