Transition-delay css 3

Asked

Viewed 227 times

1

I have a Hover effect that assigns a display: block in an element. I wish there was a delay of 2 or 3 seconds before the element that receives the block appears. I know about this Transition-delay but I don’t know (if it’s possible), apply to a display block.

css3

1 answer

2

The Estate display does not follow the rule of trasition-delay already the property visibility 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 of the progressive transparent for the solid color.

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

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.