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= "https://media.w3wiki.org/wp-content/uploads/20240104150737/i1.webp" 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
How to apply Transition on CSS Display Property ?
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
- Visibility and Display Transition Technique
- Fade-In and Fade-Out