Làm mờ dần khi di chuyển hình ảnh bằng CSS3?

Question

Tôi đã tự hỏi liệu có thể nêu ra một lớp học bất động nào đó trên một hình ảnh?

Điều tôi đang cố gắng đạt được là khi ai đó di chuột qua một hình ảnh, nó sẽ mờ đi và sau đó khi họ bỏ qua nó mờ dần ra sao?

Mã của tôi, tôi bị mờ khi làm việc khi ai đó di chuột qua hình ảnh nhưng tôi cần quá mờ dần khi họ không thể ... hy vọng điều này có ý nghĩa.

http://jsfiddle.net/L7XCD/

Answer 1

Điều này sẽ phù hợp với bạn! http://jsfiddle.net/L7XCD/1/

Hãy sử dụng các tài liệu mozilla tuyệt vời để giải thích điều này:

Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.

Ngoài ra chúng tôi sử dụng các chức năng thời gian chuyển tiếp (dễ dàng, tuyến tính, dễ-in, dễ dàng-out, dễ trong- ra)

Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier

CCS đánh dấu:

img { 
    opacity: 0.6; 
    transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -webkit-transition: opacity 1s ease-in-out; 
} 
img:hover { 
    opacity: 1.0; 
    transition: opacity .55s ease-in-out; 
    -moz-transition: opacity .55s ease-in-out; 
    -webkit-transition: opacity .55s ease-in-out; 
}​ 

Vì anh ấy đang sử dụng tính năng chuyển tiếp dễ dàng, tôi nghĩ tốt hơn nên sử dụng cùng một chức năng chuyển đổi.

Để biết thêm thông tin, hãy kiểm tra documentation here

Hy vọng điều đó sẽ hữu ích!

Answer 2

http://jsfiddle.net/L7XCD/2/ Chỉ cần thêm hiệu ứng chuyển đến phần tử của bạn mà không cần di chuột-tag