CSS 3 - Apply transition to the 'display' property

I have a question about using the transition effect in conjunction with the display property:

Currently, I am testing on Safari.

input.input_field {
    display:none;
    transition-property: display;
    transition-duration: 2s;
    -webkit-transition-property: display; /* Safari */
    -webkit-transition-duration: 2s; /* Safari */
}
input.input_field_active {
    display:block;
}

Unfortunately, this example is not working for me. Can anyone help explain why I am unable to use the display property?

Thank you!

htmlcsssafaritransition

Answer №1

When it comes to transitions, only scalable properties can be manipulated. These are numerically defined properties within a specified range where any two points are connected in some way. This is necessary because the browser uses the starting and ending points provided to calculate the interim keyframes for the animation.

For example, the display property is not scalable since it is binary in nature- either 'on' or 'off'. It doesn't have a gradual scale like other properties do. As a result, transitional values cannot be accurately determined. Another way to think about it is that the display property primarily affects layout rather than visual style, despite its visual implications. Transitions can only be applied to visual styles.

Depending on your needs, you can create transitions for properties such as opacity or height (or width).

Check out this Demo Fiddle for different transition examples

Answer №2

To create a fading effect, consider using the CSS properties visibility instead of display, and incorporate opacity.

While visibility is typically binary (either visible or hidden), you can still apply transitions to it and adjust the timing using transition delays.

See a live demonstration on JSFiddle!

HTML

<button>Hover</button>

<div class="wrap">


</div>

CSS

.wrap {
    width:100px;
    height:100px;
    border:1px solid grey;
    background-color: #bada55;
    margin-top: 25px;
    visibility:hidden;
    opacity:0;
    transition: visibility 0s linear 0.5s,
                opacity 0.35s linear;
}

button:hover + .wrap {
  visibility:visible; /* show it on hover */
  opacity:1;
  transition-delay:0; 
}

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

Assertion error: 1 does not match the expected value of 6

I am faced with a challenging test that requires me to write code that will pass successfully. However, no matter what I try, all I get is the following error messages: "Failed asserting that 1 matches expected 6" when I return 6 and "Too few arguments t ...

phphtmlobjecttesting

Guide to create a sliding menu transition from the viewport to the header

I am just starting to learn jQuery and I want to create a menu similar to the one on this website Specifically, I would like the menu to slide down from the viewport to the header, as shown in the template in the link. I have searched through the jQuery ...

javascriptjqueryhtmlcss

Custom Angular directive for collapsing sub menus with CSS

I found a helpful article on creating collapsible menus and submenus using only Bootstrap and custom code for Angular 2, 4, 5, 6. I've been able to implement the logic successfully, but I'm facing an issue with multiple menus where clicking on an ...

htmlcssangulartypescripttwitter-bootstrap-3

Activate a button utilizing jQuery keyboard functionality

Here is what I have accomplished so far: http://jsfiddle.net/qEKfg/ I have created two buttons that activate on click and resemble keyboard keys. My goal is to make them animate only when the corresponding keys (CTRL and ...

javascriptjqueryhtmlbuttonkeyboard

On smaller screens, the top placement of right sidebar links is necessary

Our website layout is organized into 3 main sections: the top part contains the main menu, followed by the main content and a sidebar specific to each page. The main content and sidebar are structured using bootstrap col-* classes. On small screens, I en ...

javascripthtmlcssbootstrap-4

Using CSS, center a div element both vertically and horizontally, and position the footer at the bottom of the page

I am encountering some unexpected behavior for a task that I thought would be simple. I have two main objectives in mind. Firstly, I want the footer to be displayed at the bottom of the page as an actual footer. Secondly, I need the div with the ".center-d ...

javascripthtmlcss

How to create an HTML hyperlink in CakePHP version 2.2.1 and above?

Is there an easy way to create an HTML link using the HtmlHelper class in CakePHP 2.2.1? Let's say I have a route set up that maps /finest-perfumes-ever-2012 to the Perfumes/Index Controller/Action. I want the generated link to be: somedomain.com/f ...

htmlcakephphyperlinkhtml-helpercakephp-2.2

The <input type="number"/> element is failing to display a numeric keypad on iOS devices

Based on the information from Apple's official documentation, setting up an input element with a type of number should result in a number keypad being displayed. <input type="number"/> number: This creates a text field specifically for en ...

ioshtml

Is there a way to populate two mysql tables using just one textarea input?

Hello, I'm currently working on my "Add Blog Post" page where I would like to make a change. Specifically, I want to eliminate one textarea (the post description area) and have the content entered in the Post Content textarea populate both the post de ...

phphtmlmysql

Confirming the validity of an email address with Md-chips

Email Validation for MD-Chips Struggling with creating an email validation for md-chips. The current expression I'm using is not working as expected, since the ng-keypress directive is triggered every time I type something. Any suggestions on how to ...

javascripthtmlangularjs

Maintain correct aspect ratio when zooming in the body

I'm facing a challenge with my single-page web application that has fixed width and height. It doesn't scale properly to fit the page at all times. Scaling based on its width works fine, but I want to achieve scaling from both width and height w ...

jquerycsszoomingaspect-ratio

Safari's CSS Hacking Problem

After testing the code below, it appears to be working on both Safari and Chrome. I am seeking a hack specifically for Safari, not Chrome .contactDiv img:not(:root:root) { margin-top:-75px; } @media screen and (-webkit-min-device-pixel-ratio:0) { ...

csssafari

Optimizing Divs for Maximum Layout Efficiency

My current issue involves a series of divs that contain varying amounts of content. These divs are floated left and I am striving to align them seamlessly without any vertical space between them (except for the 10px margin that I have included). You can v ...

csslayouthtmlgridcss-float

What is the best way to assign a JavaScript return value to a PHP variable?

Is it possible to capture the return value of a JavaScript function that checks if text boxes are empty and assign it to a PHP variable? I have successfully created a JavaScript function that returns false if any of the text boxes are empty, but now I ne ...

javascriptphphtml

Image input not working in Internet Explorer

While the button displays correctly in Chrome and Firefox, it appears differently in IE: To address this issue in IE, you may need to make adjustments to the CSS styles specifically for that browser. One potential solution could involve creating a separat ...

htmlcsswordpressinternet-explorer

Arranging items in a flex container

My goal is to achieve the following layout with flexbox: #box { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; justify-items: center; align-items: center; } #spotLight img { width: 15%; height: 15%; } # ...

htmlcss

What is the method for individually extracting values from HTML using class li?

Is there a way to extract each value from the HTML within the li class separately? I have tried various methods but none have been successful. Can anyone provide a solution? Here is my JavaScript code: $(document).ready(function() { $(".list-grou ...

javascripthtmljquery

Divs are being obstructed by the navigation bar

I am seeking a solution to prevent div elements from being positioned below my navigation/information bar when the screen width is minimized. The information bar has a height of 1200px and I would like it to stay on the left side without any overlapping fr ...

htmlcss

Conceal the vertical scrollbar while allowing horizontal scrolling to remain enabled

I'm attempting to create a layout with HTML/CSS where there is a div that can be scrolled vertically and horizontally, but I only want the horizontal scrollbar to be visible. The vertical scrolling should be done using the mouse wheel while the horizo ...

htmlcss

Transfer files and data efficiently using Ajax

I am facing an issue while trying to send a file and data together to the Controller. When I only send the file, it works correctly. However, when attempting to send both data and a file, nothing seems to work. contentType: false, processData: false, Rem ...

phpjqueryhtmlajaxlaravel