Why Transition properties does not work with display properties ?

When we want to use transition for display:none to display:block, transition properties do not work. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable. That is why the transition property does not work.

So for animation, we use keyframes CSS.

@keyframes animationname {keyframes-selector {css-styles;}}

What does keyframes do?
The @keyframes rule specifies the code for animation. When one set of CSS style is changed to another set of CSS style, the animation is created and specify whenever the style changes. It can be in percent or with the keywords “from” and “to”, which will be equivalent to 0% and 100%. Here 0% is the beginning of the animation and 100% is the end of the animation.

Which Browser supports keyframes and what is prefix for that browser?

  • Chrome  & safari=> -webkit-
  • Mozila => -moz-
  • Opera => -o-

Code snippet:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        html,
        body {
            height: 100%;
            padding: 0;
            font: 20px/40px sans-serif;
        }
  
        h1 {
            padding: 20px;
        }
  
        div {
            width: 100%;
            background: pink;
            padding: 20px;
            display: none;
        }
  
        body:hover div {
            display: block;
            -webkit-animation: slide-down 2.3s ease-out;
            -moz-animation: slide-down 3.3s ease-out;
        }
  
        @-webkit-keyframes slide-down {
            0% {
                opacity: 0;
            }
  
            100% {
                opacity: 1;
            }
        }
  
        @-moz-keyframes slide-down {
            0% {
                opacity: 0;
            }
  
            100% {
                opacity: 1;
            }
        }
    </style>
</head>
  
<body>
    <h1>Hover me</h1>
    <div>Hello</div>
</body>
  
</html>

chevron_right



Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.