Chấm dứt/di chuột chậm với chuyển tiếp CSS3

Question

Tôi có một hộp thay đổi kích thước khi được di chuột. Tuy nhiên, tôi muốn trì hoãn giai đoạn di chuột, để hộp giữ kích thước mới trong vài giây, trước khi nhận lại kích thước cũ.

div { 
    width: 70px; 
    -webkit-transition: .5s all;  
} 

div:hover { 
    width:130px; 
} 

Điều này có thể thực hiện KHÔNG CÓ Javascript và chỉ CSS3 không? Tôi chỉ phải quan tâm đến việc hỗ trợ webkit.

Answer 1

div { 
    width: 70px; 
    -webkit-transition: .5s all; 
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all; 
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all; 
    -ms-transition-delay: 5s; 
    -o-transition: .5s all; 
    -o-transition-delay: 5s; 
    transition: .5s all; 
    transition-delay: 5s; 
} 

div:hover { 
    width:130px; 
    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -ms-transition-delay: 0s; 
    -o-transition-delay: 0s; 
    transition-delay: 0s; 
} 

Điều này sẽ kích hoạt trạng thái di chuột ngay lập tức, nhưng đợi 5 giây cho đến khi phát hành được kích hoạt.

Fiddle

Answer 2

chuyển tiếp có thể được khai báo là

transition: .5s all 5s 

(viết tắt, số đầu tiên là thời gian, số thứ hai là sự chậm trễ) sau đó bạn không cần phải chuyển đổi-delay riêng

xin lỗi, không thể thêm làm nhận xét vì tôi không có đủ điểm