Hoạt ảnh ngược CSS trên mouseleave

Question

Tôi có một hoạt ảnh CSS hai bước mà tôi muốn chạy về phía trước một lần khi "kích hoạt", và sau đó chạy lùi lại khi "ngừng hoạt động". Tôi biết có thể đạt được bằng cách xác định các hình ảnh động về phía trước và phía sau riêng lẻ, like so, nhưng tôi đã tự hỏi liệu điều này có thể đạt được với một hoạt ảnh đơn lẻ và thuộc tính animation-direction: reverse hay không.

Answer 1

Một cái gì đó như thế này? Nếu vì vậy những gì bạn đang tìm kiếm là

-o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -webkit-transition: all 0.5s ease; 
    transition: all 0.5s ease; 

Nếu bạn cần phải gắn nó vào một nhấp chuột bạn có thể thêm kịch bản để nó để toggleClass với onClick

#test{ 
 
    position:absolute; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: #A8A8A8; 
 
    border-bottom: 0px solid black; 
 
    
 
    -o-transition: all 0.5s ease; 
 
    -ms-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -webkit-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#test:hover{ 
 
    border-bottom: 10px solid black; 
 
}

<div id="test"> 
 
</div>

Answer 2

div { 
 
    background: aqua; 
 
    color: #fff; 
 
    margin: 0 auto; 
 
    padding: 100px 0; 
 
    -webkit-transition: -webkit-border-radius 1.5s ease-in; 
 
    -moz-transition: -moz-border-radius 1.5s ease-in; 
 
    -o-transition: border-radius 1.5s ease-in; 
 
    -ms-transition: border-radius 1.5s ease-in; 
 
    transition: border-radius 1.5s ease-in; 
 
    text-align: center; 
 
    width: 200px; 
 
\t \t 
 
\t \t -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    -ms-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
    -webkit-transform: rotate(-360deg); 
 
    -moz-transform: rotate(-360deg); 
 
    -o-transform: rotate(-360deg); 
 
    -ms-transform: rotate(-360deg); 
 
    transform: rotate(-360deg); 
 
} 
 

 
div:hover { 
 
    background: red; 
 
    -webkit-border-radius: 100px; 
 
    -moz-border-radius: 100px; 
 
    border-radius: 100px; 
 
    -webkit-transition: -webkit-border-radius 1.5s ease-in; 
 
    -moz-transition: -moz-border-radius 1.5s ease-in; 
 
    -o-transition: border-radius 1.5s ease-in; 
 
    -ms-transition: border-radius 1.5s ease-in; 
 
    transition: border-radius 1.5s ease-in; 
 
\t \t 
 
\t \t -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    -ms-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
}

<div></div>