css3 - How do I reverse this CSS rotate animation? -


i have css animation i'm trying reverse animation of based on class being added dom node. i've tried multiple things no avail. here code i'm using, see below:

example

    // closed state     @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } }     @-webkit-keyframes spin-close { 100% {  -webkit-transform: rotate(-0deg); } }     @keyframes spin-close { 100% { transform:rotate(-0deg); } }      // open state     @-moz-keyframes spin-open { 100% { -moz-transform: rotate(-90deg); } }     @-webkit-keyframes spin-open { 100% { -webkit-transform: rotate(-90deg); } }     @keyframes spin-open { 100% { transform:rotate(-90deg); } } 

i don't know whether i'm looking @ wrong? please advise(a demo awesome).

don't bother javascript or animations. use css transition this:

.image {     position: absolute;     top: 50%;     left: 50%;     width: 120px;     height: 120px;     margin:-60px 0 0 -60px;     transition:all 1s ease-out;     transform:rotate(0deg);     -webkit-transform:rotate(0deg); /* safari , chrome */ }  .image:hover {     transform:rotate(90deg);     -webkit-transform:rotate(90deg); /* safari , chrome */ } 

http://jsfiddle.net/ugc5g/892/


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -