2

How to apply Transition on CSS Display Property ?

 8 months ago
source link: https://www.geeksforgeeks.org/how-to-apply-transition-on-css-display-property/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

How to apply Transition on CSS Display Property ?

Courses

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.

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.

<!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>

Output

i1

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.

<!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>

Output

i1gif

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

  • Javascript
<!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>

Output

Learn to code easily with our course Coding for Everyone. This course is accessible and designed for everyone, even if you're new to coding. Start today and join millions on a journey to improve your skills!

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!
Commit to GfG's Three-90 Challenge! Purchase a course, complete 90% in 90 days, and save 90% cost click here to explore.
Last Updated : 10 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK