Issue with transition not being activated after the implementation of display: table

I am facing an issue with a <table> nested within a <div>. My goal is to make the <div> scale according to the size of the <table>, but this transition seems to fail when I apply display: table; in my CSS. The <div> should only be visible upon clicking a button, accompanied by a smooth sliding animation.

input.toggle ~ div 
{ 
    transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); 
}

input.toggle:checked ~ div 
{ 
    display: table;
}

To achieve the desired effect, I'm referencing this link:

csshtmlcss-transitions

Answer №1

The issue at hand is the inclusion of a non-animatable property on the element targeted for transition.

As a result, the transition fails to take effect.

Refer to the official specification - the 'display' property is not among the animatable properties.

To resolve this, you must eliminate the display: table; declaration from the input.toggle:checked ~ div class.

Follow the example provided in this code snippet from the article - it functions correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing AngularJS from being invoked in Microsoft Dynamics CRM 2015 on IE11?

I created a ribbon button to open an HTML page from my web resources. After adding an example.html page with code borrowed from W3 schools, I encountered an issue: <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...

angularjshtmlinternet-explorer-11microsoft-dynamicsdynamics-crm-2015

Having trouble getting the bootstrap navigation toggler to function properly

I've been trying to implement the following code using Bootstrap, but I'm running into an issue where clicking on the toggler does not display anything. The button registers when I hover and click on it, but no content is shown. I followed the ex ...

htmltwitter-bootstrapbootstrap-4bootstrap-5

Adjust the width of content within a wrapper using HTML and CSS to automatically resize

I am facing an issue with a content div that has variable length content arranged horizontally. I want the width of this content div to adjust automatically based on the length of its content. Removing the arbitrary "20%" value from the width property is c ...

htmlcss

Tips for including a numerical quantity to an existing value

I have developed a PHP code for adding products to a cart. The code is designed in such a way that when a user selects an existing product in the cart, the quantity of the existing product and the newly inputted quantity will be combined together. $se ...

phphtml

Align the radio button group in the center with corresponding labels

I have several radio buttons with labels that vary in length. I am trying to figure out how to center them horizontally so that the labels are centered on the page, but still appear as if they are left-aligned. Desired result: Current HTML snippet: < ...

htmlcssradio-button

The issue of transform scale not functioning properly in conjunction with background clip and gradients in CSS

Looking to transform a div with the transform: scale(-1,1) property while using background-clip: text on the text within it. However, this causes the text to disappear. Here's what I've attempted: .reverse { transform: scale(-1, 1); } .gr ...

javascripthtmlcss

Having issues with the CSS property `vertical-align: middle` not functioning properly?

My expectations for the following HTML document were to see a red square vertically centered within a yellow square: <html> <body> <div style="width:200px;height:200px;background-color:yellow"> <div style="width:100px;height:100 ...

htmlcss

Tips for launching different web browsers via hyperlinks?

My app has a link that I want mobile users from apps like LinkedIn to open in a browser such as Safari. I attempted this: <a href="safari-https://meed.audiencevideo.com">May open on Safari</a>' However, when I click the link, it opens i ...

javascripthtmllinkedin-api

Using Bootstrap to Implement Special CSS Styles for Various Devices

Is there a way to implement specific CSS rules for different screen sizes using bootstrap? For example, on medium screens (md), can we set an element's left-margin to 10px and have it be 100px on small screens (sm)? Any guidance would be appreciated. ...

htmlcsstwitter-bootstrap

The onreadystatechange function is not triggering

For some reason, the onreadystatechange callback function is not triggering in asynchronous mode. After testing the post request in synchronous mode, it seems that the post itself is functioning correctly (the testing code used for synchronous mode has b ...

javascripthtmlajax

How can we make the text of a link wrap, without wrapping the links themselves?

In my design, I am using links in a list to create tabs for responsiveness. The issue arises when the width is reduced; instead of the last tab wrapping onto the next line, I want the text within the link itself to wrap. Setting the max-width to be 33% wo ...

css

Creating visual content on a website

I'm currently working on a project where I need to showcase the results of a numerical model I am operating. My goal is to gather user input in the form of latitude/longitude coordinates, utilize php (or a similar tool) to trigger a python script that ...

javascripthtmlcssweb

Tips for showcasing two cards side by side on mobile screens?

This is my glitch. I have a layout where I see 3 cards in a row for desktops, 2 cards per row on tablets, and 1 card for mobile devices. However, I would like the cards to resize and display 2 cards in a row on mobile. How can I achieve this? Here is the f ...

htmlcssresponsive-designresponsivemobile-website

Fit the image to fill the available space and position it in the center for maximum impact

I'm currently working on a single page application where I need to display an image that fills up as much available space as possible: Priority: maintain the aspect ratio Avoid cropping the image Stretch the image horizontally and/or vertically (with ...

cssstretch

Troubleshooting the issue with form centering in Bootstrap

I've been attempting to center my form within a div, but the techniques I've applied are not yielding the desired result. I followed the bootstrap documentation and used the justify-content-center attribute, but it isn't aligning the form pr ...

htmlcssbootstrap-4

having difficulty uploading an image on wampserver

I am seeking advice and assistance with an issue I am facing. I am attempting to upload an image, but Wampserver keeps displaying the following error message (Warning: POST Content-Length of 80237 bytes exceeds the limit of 750 bytes in Unknown on line 0 F ...

ajaxhtml

Utilizing CSS inheritance in React app to style multiple classes simultaneously

My app features two buttons that serve similar functions on different pages. One button directs users to the search page, while the other takes them back to the home page. The challenge I'm facing is that I need the background image for each button t ...

cssreactjs

Experiencing problems with jQuery drop-down menus - added arrows to menu links, but menu disappears when arrows are hovered over

My website has a drop-down menu implemented using jQuery, and it works well. However, I'm facing an issue where I want to add an arrow to the links that have sub-menus. The problem is that when you hover over this arrow, technically you're not ho ...

jqueryhtmlcsswordpress

Replace the single text area with multiple div elements and update the image within each div

Within the 'Pinctitle' area, there is text that I want to change each time a Pselectorbutton is hovered over with a fading effect. Additionally, I would like the image inside the 'Pselectorbutton' to change at the same time. Currently, ...

jqueryhtmlcss

jQuery and ajax not functioning properly with disabled button

After a user clicks the submit button in an HTML form, I am trying to disable the button. However, the form redirects to the next page without disabling the button. The ideal process should be: User clicks the submit button Validation is performed Submi ...

jqueryhtmlajaxformsbutton