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:
// 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 */ }
Comments
Post a Comment