css3 - CSS transition does not work on top property in FF -


i have following html:

<ul>     <li>         <a href="#">             <h2>title</h2>         </a>     </li>      <li>         <a href="#">             <h2>title</h2>         </a>     </li>      <li>         <a href="#">             <h2>title</h2>         </a>     </li> </ul> 

css

ul {     list-style: none;       text-align: center; } ul li {     position: relative;     float: right;     margin-right: 20px;     width: 30%; } ul li {     transition: 0.3s; } ul li:hover {     top: -10px; } ul li> a{     color: red; } 

the question transition not work moz, works on webkit. how implement in cross browser way?

demo

browsers don't apply transition on property if initial value not specified in element. hence, adding top: 0px ul li solve issue.

ul {    list-style: none;    text-align: center;  }  ul li {    position: relative;    float: right;    margin-right: 20px;    top: 0px; /* line added */    width: 30%;  }  ul li {    transition: 0.3s;  }  ul li:hover {    top: -10px;  }  ul li> {    color: red;  }
<!-- library included avoid prefixes users older browser can view -->  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>    <ul>    <li>      <a href="#">        <h2>title</h2>      </a>    </li>    <li>      <a href="#">        <h2>title</h2>      </a>    </li>    <li>      <a href="#">        <h2>title</h2>      </a>    </li>  </ul>

note: suggest using same option (transform) mentioned in mr_green's answer.


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -