transition-delay css 3

Question

transition-delay css 3

Navigation

#1 by (2 votes)

1

I have a hover effect that assigns a display: block to an element. I wish there was a delay of 2 or 3 seconds before the element that receives the block appears. I know of this transition-delay but I am not aware (if it is possible) to apply it in a display block.

css3

asked by anonymous 27.07.2015 / 21:49

1 answer

Create indexes dynamically with javascript How do I migrate my website to RequireJS?

score 2 · Answer 1

The display property does not follow the trasition-delay rule already the visibility property yes only in a more rigid way ( More info here on the difference between both properties.)

Perhaps a more visual solution would be to apply background from progressive transparent to solid color.

Here's an example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .delay {
            background: tomato;

            height: 120px;
            width: 240px;

            visibility: hidden;

            transition-delay: 3s;
            }
        </style>
    </head>
    <body>
        <input type="submit" value="click" onClick="display()">
        <div id="delay" class="delay"></div>
        <script>
            function display() {
                var element = document.getElementById("delay");
                element.style.visibility = "visible";
            }
        </script>
    </body>
</html>