向CSS添加轉換

Question

我想添加平滑的動畫轉換以在此CSS中下拉菜單。哪些代碼和我應該放在哪裏？我嘗試過一些「webkit-transition」變體，但沒有一個能夠用我的編程技能。任何人都可以解決此問題？

ul.jb_free_dropdown, 
    ul.jb_free_dropdown li, 
    ul.jb_free_dropdown ul { 
     list-style: none; 
     margin: 0; 
     padding: 0; 
     font-family: Arial, Helvetica, sans-serif; 
    } 

    ul.jb_free_dropdown { 
     position: relative; 
     z-index: 597; 
     float: left; 
    } 

    ul.jb_free_dropdown li { 
     float: left; 
     min-height: 1px; 
     line-height: 1.3em; 
     vertical-align: middle; 

    } 

    ul.jb_free_dropdown li.hover, 
    ul.jb_free_dropdown li:hover { 
     position: relative; 
     z-index: 599; 
     cursor: default; 
    } 

    ul.jb_free_dropdown ul { 
     visibility: hidden; 
     position: absolute; 
     top: 100%; 
     left: 0; 
     z-index: 598; 
     width: 100%; 

    } 

    ul.jb_free_dropdown ul li { 
     float: none; 

    } 

    ul.jb_free_dropdown ul ul { 
     top: 0px; 
     left: 100%;     
    } 

    ul.jb_free_dropdown li:hover > ul { 
     visibility: visible; 
    } 


    /* -- Base drop-down styling -- */ 

    ul.jb_free_dropdown { 
     font-weight: bold; 
    } 

     ul.jb_free_dropdown li { 
     padding: 7px 10px; 
     border-style: solid; 
     border-width: 1px 1px 1px 0; 
     border-color: #fff #d9d9d9 #d9d9d9; 
     background-color: #f6f6f6; 
     color: #000; 
    } 

     ul.jb_free_dropdown li.hover, 
     ul.jb_free_dropdown li:hover, 
     ul.jb_free_dropdown li.on { 
     background-color: #eee; 
     color: #000; 
     } 

     ul.jb_free_dropdown a:link, 
     ul.jb_free_dropdown a:visited { color: #000; text-decoration: none; } 
     ul.jb_free_dropdown a:hover  { color: #000; background-color: #ececec;} 
     ul.jb_free_dropdown a:active { color: #000; } 

     /* -- level mark -- */ 

     ul.jb_free_dropdown ul { 
     width: 200px; 
     margin-top: 1px; 
     } 

      ul.jb_free_dropdown ul li { 
      font-weight: normal; 
      } 






    ul.jb_free_dropdown a, 
    ul.jb_free_dropdown span { 
    display: block; 
    padding: 10px 20px; 
    background-color: #ffffff; 
    background-repeat: repeat-x; 

    } 


    /* -- Base style override -- */ 

    ul.jb_free_dropdown li { 
    padding: 0; 
    border: none; 
    } 

    /* 
    JB 
    */ 
    ul.jb_free_dropdown li li.parent a { 
     background: #f4f4f4 url('../../media/images/arrow.png') right 10px no-repeat; 
    } 

    ul.jb_free_dropdown li li.parent li a { 
     background: #f4f4f4; 
    } 

    ul.jb_free_dropdown li.parent a:hover { 
     background-color: #ececec; 
    } 


    ul.jb_free_dropdown li.active a { 
     background-color: #fff; 

    } 
    ul.jb_free_dropdown li.active li a { 
     background-color: #f4f4f4; 


    } 
    ul.jb_free_dropdown li.active li a:hover { 
     background-color: #ececec; 
    } 



    /* 
    JB 
    */ 

    ul.jb_free_dropdown ul a, 
    ul.jb_free_dropdown ul span { 
    padding: 8px; 
    } 


    /* -- Base style reinitiate: post-override activities -- */ 




    /* -- Custom styles -- */ 

    ul.jb_free_dropdown li.hover, 
    ul.jb_free_dropdown li:hover { 
    background: url(../../../../images/default/grad2.png) 0 100% repeat-x; 
    color: #000; 
    background-color: #fff; 
    } 

    ul.jb_free_dropdown li:hover { 
     color: #fff; 
    } 

    ul.jb_free_dropdown li a:active { 
     background: url(../../../../images/default/grad1.png) repeat-x; 
    } 

     ul.jb_free_dropdown ul { 
     margin-top: 0; 

     } 


    /* -- Mixed -- */ 

    ul.jb_free_dropdown li a, 
    ul.jb_free_dropdown *.dir { 
    border-style: solid; 
    border-width: 1px 1px 1px 0; 
    border-color: #fff #d9d9d9 #d9d9d9; 
    } 


    /* -- Drop-down open -- */ 

Answer 1

通常情況下，過渡效果會陪父母CSS選擇器，並且「要結束了」的結果將是對:hover選擇。

我已經在過去使用這個和它的跨瀏覽器效果很好：

CSS

.view .mask { 
    -webkit-transform: translatex(0) translatey(100px); 
    -moz-transform: translatex(0) translatey(100px); 
    -o-transform: translatex(0) translatey(100px); 
    -ms-transform: translatex(0) translatey(100px); 
    transform: translatex(0) translatey(100px); 
    -webkit-transition: all .8s ease-out; 
    -moz-transition: all .8s ease-out; 
    -o-transition: all .8s ease-out; 
    -ms-transition: all .8s ease-out; 
    transition: all .8s ease-out; 
    } 

.view:hover .mask { 
    -webkit-transform: translatey(0); 
    -moz-transform: translatey(0); 
    -o-transform: translatey(0); 
    -ms-transform: translatey(0); 
    transform: translatey(0); 
    }