CSS chuyển tiếp không hoạt động trên tài sản hàng đầu trong FF

Question

Tôi có HTML sau:

<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: all 0.3s; 
} 
ul li:hover { 
    top: -10px; 
} 
ul li> a{ 
    color: red; 
} 

Câu hỏi đặt ra là quá trình chuyển đổi không làm việc với MOZ, nó hoạt động trên webkit . Làm thế nào để tôi thực hiện điều này theo một cách trình duyệt chéo?

DEMO

Answer 1

Trình duyệt không áp dụng transition trên thuộc tính nếu giá trị ban đầu không được chỉ định trong phần tử. Do đó, việc thêm top: 0px vào ul li sẽ giải quyết vấn đề.

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

<!-- Library included just to avoid prefixes so that users with 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>

Lưu ý: Tôi cũng xin đề nghị sử dụng các tùy chọn tương tự (transform) như đã đề cập trong câu trả lời của Mr_Green.

Answer 2

Hãy thử điều này:

ul li { 
    /* standard property and other vendor prefixes */ 
    -moz-transition: -moz-transform 0.3s; 
} 
ul li:hover { 
    /* standard property and other vendor prefixes */ 
    -moz-transform: translateY(-10px); 
} 

Answer 3

Đó chắc chắn không phải là tuyên bố chuyển hoặc bất cứ điều gì khác trong CSS bạn đã viết --- thử thêm opacity:.5 sang trạng thái di chuột và bạn sẽ thấy nó animate tốt.

Vì vậy, vì một số lý do, Firefox không chuyển đổi thuộc tính top. Thành thật mà nói, tôi không biết tại sao. Giải pháp của tôi bây giờ sẽ được sử dụng một CSS transform để di chuyển mục lên 10px thay vì:

ul li:hover { 
    -o-transform: translateY(-10px); 
    -ms-transform: translateY(-10px); 
    -moz-transform: translateY(-10px); 
    -webkit-transform: translateY(-10px); 
    transform: translateY(-10px); 

}

này sinh động thành công trong Firefox như bạn có thể xem tại đây:

http://jsfiddle.net/y7yQQ/7/

Answer 4

Tôi không biết tại sao top bất động sản css là hành động kỳ lạ để làm hình ảnh động trong firefox thậm chí nó được liệt kê là animation behaviour property trong css.

Dù sao, sử dụng margin-top thay vì top vẫn hoạt động tốt trong Firefox.

Nhưng tôi muốn đề nghị đi với transform 's 'translateX' và 'translateY' thuộc tính css thay vì sử dụng vị từ lần sau vì nó là hiệu quả. (được đề xuất bởi Paul Irish)