CSS. Transition How to make two transitions so that first one transition property is executed, then after a second I tried the second, but it turned out clumsily. If you can with the help of JS, then offer.

#house{ height:90%; width:90%; } #menu{ width:6%; height:6%; background-color:#CCCCCC; cursor:pointer; } #menu_main{ position:fixed; top:1%; left:1%; } #gee{ position:fixed; top:-1%; width:0%; height:0%; transition:width 1s ease; transition:height 1s ease 1s; overflow:hidden; left:2%; color:white; margin-bottom:3%; } #om ul li{ font-size:195%; background-color:#CCCCCC; list-style-image:none; margin-top:2px; list-style-type:none; margin-left:-2%; text-align:center; } #menu:hover .tooltip{ height:100%; width:100%; } 
 <di<div id = "menu_main"> <div id = "menu"> <center> <img src = "https://cdn.pixabay.com/photo/2014/04/03/00/41/house-309113_960_720.png" id = "house"></img> </center> <div id = "om"> <ul class = "tooltip" id = "gee"> <li>Главная Страница</li> <li>Карта Сайта</li> <li>Контакты</li> </ul> </div> </div> </div>

    1 answer 1

    The transition has a detailed record, like background .

    There is:

    • transition-property
    • transition-duration
    • transition-delay
    • transition-timing-function

    Using them, you can configure transition for different properties.

    See an example.

     #house { height: 90%; width: 90%; } #menu { width: 6%; height: 6%; background-color: #CCCCCC; cursor: pointer; } #menu_main { position: fixed; top: 1%; left: 1%; } #gee { position: fixed; top: -1%; width: 0%; height: 2%; transition-property: width, height; transition-duration: 1s; transition-delay: 1s,0s; overflow: hidden; left: 2%; color: white; margin-bottom: 3%; } #om ul li { font-size: 195%; background-color: #CCCCCC; list-style-image: none; margin-top: 2px; list-style-type: none; margin-left: -2%; text-align: center; } #menu:hover .tooltip { height: 100%; width: 100%; transition-delay: 0s, 1s; } 
     <div id="menu_main"> <div id="menu"> <center> <img src="https://cdn.pixabay.com/photo/2014/04/03/00/41/house-309113_960_720.png" id="house" /> </center> <div id="om"> <ul class="tooltip" id="gee"> <li>Главная Страница</li> <li>Карта Сайта</li> <li>Контакты</li> </ul> </div> </div> </div>