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?
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
Post a Comment