CSS reverse animation on mice

Question

I have a two-stage CSS animation that I want to run right after activation, and then run back when "deactivated." I know this can be achieved by defining individual animations back and forth like this , but I was wondering if this was possible with a single animation and the animation-direction: reverse property.

Answer 1

Something like that? If so, then you are looking

 -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; 

If you need to attach it to a click, you can add a script to it to toggleClass with 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; -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; -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>