This article will guide the implementation of basic Transition on CSS Display Property, aiming to achieve seamless and aesthetically pleasing transitions when altering the visibility of an element. Upon clicking the button, the image smoothly transitions to create a visually engaging effect.
Table of Content
Opacity and Display Transition Technique
The approach Utilizes both opacity and display properties to achieve a smooth transition effect.
Approach
- Create an HTML file with the given code. Add an external stylesheet to give style to the elements.
- The .element class initially sets the opacity to 0, display to none, and applies a fade-in/out animation over 0.6 seconds. The .element class changes the opacity to 1 and the display to block, making the element visible.
- The button on hover, the button transitions smoothly in terms of background color and text color over 0.3 seconds.
- The @keyframes fadeInOut defines keyframes for the fade-in/out animation: At 0%, the element is fully transparent (opacity: 0) and not displayed (display: none), At 50%, the element becomes partially transparent (opacity: 0.5) and is displayed as a block, At 100%, the element is fully opaque (opacity: 1) and displayed as a block.
Example: The example shows transition on CSS using display property using opacity and display transition.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Opacity and
Display Transition
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="element">
<img src=
alt="gfgimg">
</div>
<button onclick="toggleElement()">
Toggle Element
</button>
<script>
function toggleElement() {
const element = document
.querySelector('.element');
element.classList.toggle('visible');
}
</script>
</body>
</html>
|
CSS
.element { opacity: 0;
display: none;
animation: fadeInOut 0.6s ease-in-out;
} .element.visible {
opacity: 1;
display: block;
} button { margin-left: 10%;
background-color: #3498db;
color: #fff;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out,
color 0.3s ease-in-out;
} button:hover { background-color: #2980b9;
color: #fff;
} @keyframes fadeInOut { 0% {
opacity: 0;
display: none;
}
50% {
opacity: 0.5;
display: block;
}
100% {
opacity: 1;
display: block;
}
} |
Output
Visibility and Display Transition Technique
Use visibility in combination with the display property to create a transition effect.
Approach
- This HTML code creates a simple webpage with a div and a button. The element is initially visible and transitions its display property smoothly over 0.3 seconds.
- When the element has the class “hidden,” it becomes invisible, with both visibility and display set to hidden.
- The button has a margin, background color, and text color styles. On hover, the background color and text color smoothly change over 0.3 seconds.
Example: The code explains how to Apply Transition on CSS Display Property using the display property.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Visibility and
Display Transition
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="element" id="myElement">
</div>
<button onclick="toggleElement()">
Toggle Element
</button>
<script>
function toggleElement() {
const element = document
.getElementById('myElement');
element.classList.toggle('visible');
}
</script>
</body>
</html>
|
CSS
.element { width: 200px;
height: 200px;
background-color: #ff3a7f;
opacity: 0;
visibility: hidden;
display: none;
animation: slideInOut 1s ease-in-out;
} .element.visible {
opacity: 1;
visibility: visible;
display: block;
} @keyframes slideInOut { 0% {
opacity: 0;
visibility: hidden;
transform: translateY(-200px);
}
50% {
opacity: 0.5;
visibility: visible;
transform: translateY(0);
}
100% {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
} button { margin-top: 20px;
background-color: #2ecc71;
color: #fff;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out,
color 0.3s ease-in-out;
} button:hover { background-color: #27ae60;
color: #fff;
} |
Output
Fade-In and Fade-Out
- This HTML code creates a simple webpage with an image and a button. The button is intended to toggle the visibility of the image when clicked.
- The image with the class .image is styled to be a block element, ensuring it is responsive with a maximum width of 100%. It has a 5% margin and a smooth transition effect on its opacity over 0.5 seconds.
- The toggleImage() function, selects an element with the class ‘image’ and toggles its visibility by changing the opacity. If the current opacity is 0, it sets it to 1, making the image visible; if it’s 1, it sets it to 0, making the image invisible.
Example: The example shows how to Apply Transition on CSS Display Property
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Display Transition Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>GeeksforGeeks</h1>
<img src=
alt="gfg"
class="image">
<br>
<button onclick="toggleImage()">
Toggle To Change
</button>
<script src="script.js"></script>
</body>
</html>
|
CSS
body { background-color: rgb(195, 234, 183);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
} h1 {
color: green;
} img { display: block;
max-width: 100%;
transition: opacity 0.5s ease-in-out;
} button { padding: 1%;
background-color: rgb(213, 213, 247);
color: black;
font-size: large;
font-weight: bolder;
cursor: pointer;
} button:hover { background-color: rgb(211, 250, 237);
} |
Javascript
function toggleImage() {
const image = document
.querySelector('.image');
image.style.opacity =
(image.style.opacity === '0') ? '1' : '0';
} |
Output