Adding transition to CSS

Question

I want to add smooth animated transition to drop down in this CSS. Which code and where I should place? I have tried some "webkit-transition" variants but none worked with my skills in programming. Anyone can solve this problem?

  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

Usually the transition effects would accompany the parent css selector, and the resultant of "where you want to end up" would be on the :hover selector.

I have used this in the past and it works well across browsers:

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);
    }