PBA INSTITUTE

Transition in CSS

In CSS, transitions provide a way to smoothly animate changes in CSS properties. They allow elements to change from one style to another over a specified duration, creating a more dynamic and visually appealing user experience. By defining which CSS properties to transition and the duration of the transition, developers can add subtle animations that enhance usability and engagement.

Here are some examples of transition

Example 1

														
														

<!DOCTYPE html>
<html>
<head>
<style>
    div{
        color: white;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: #509BD1 ;
        transition: width 0.5s, height 0.5s, background-color 0.5s;
    }

    .box:hover {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<title>PBA INSTITUTE</title>
</head>
<body>
    <div class="box">PBA INSTITUTE</div>
</body>
</html>

 


														
														
													

In this example, '.box' div appears as a blue square with dimensions 100px by 100px. When hovering over the '.box' div, the width and height increase to 200px smoothly over 0.5s. Simultaneously, the background-color transitions from blue to tomato over 0.5s, creating a smooth color change effect.

OUTPUT :

PBA INSTITUTE

PBAINST

Example 2

														
														

<!DOCTYPE html>
<html>
<head>
<style>
.btn {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.btn:hover {
    background-color: #45a049;
    color: #f2f2f2;
    }
</style>
<title></title>
</head>
<body>
    <button class="btn">PBA</button>
</body>
</html>


														
														
														
													

In this example, HTML code defines a button styled using CSS. The button has padding, green background, white text, no border, and changes color on hover. CSS `.btn` class styles the button, and `:hover` pseudo-class changes background to dark green and text to light gray.

Conclusion :

In conclusion, CSS transition enables smooth property changes over time, enhancing user experience. It specifies the duration, timing function, property, and delay of transitions, allowing elements to animate from one state to another gracefully. This capability is crucial for creating interactive and visually appealing interfaces, where elements can smoothly transform in response to user actions like hover or click events.

Introduction Selectors Style Sheet Insertion CSS Color CSS Backgrounds
CSS Border CSS Margin CSS Table CSS Text Fonts CSS Links Animation Button Transition Cursor Type Navbar Layout Login Page Image Slider

Transition in CSS

Conclusion :

CSS All Topics

SHARE