- This topic is empty.
-
AuthorPosts
-
September 9, 2011 at 2:14 pm #34292
Andy_H
ParticipantHello!
I have an image of a record that is spinning on the page like this:
html
css
/*Animations
*************************/
@-webkit-keyframes rotate-record {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate-record {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
/*Structure
*************************/
.record-label {position:absolute; top:0; left:0;}
.rotate-image {
-webkit-animation:rotate-record 3s infinite linear;
-moz-animation:rotate-record 3s infinite linear;
}
.record-wrap {position:relative; height:250px; width:233px;}
.record-wrap a {cursor:pointer;}
.stop-play {background:#333; display:block; position:absolute; bottom:2px; left:0; width:14px; height:14px;}
.stop-play:hover {background:#888;}
js
$('.stop-play').click(function() {
$('.record-label').removeClass('rotate-image');
});
html: image and a stop button in a wrapper
css: make it spin
js: remove the rotate-image classThe problem is when I remove the class that makes it rotate the record goes back to it’s status quo position 0deg. What I would want it to do: is to stop right there in that position. Is there a way?
Or would it be just easier to do the whole thing with jQuery using .animate() and .stop(). See here.
Thank you!!!!111 :)
September 9, 2011 at 2:51 pm #86823Chris Coyier
KeymasterThere is a thing called the animation-play-state in which you can pause animations. http://dev.w3.org/csswg/css3-animations/#animation-events- Theoretically… I haven’t played with it at all, and I’m not even sure what the support is.
September 9, 2011 at 4:43 pm #86832Chris Coyier
KeymasterSeptember 10, 2011 at 4:23 am #86860Andy_H
ParticipantThanks Chris!
June 21, 2013 at 5:23 pm #139818paulala
MemberGreat thread! Thank you for posing and solving a problem that is both technically and conceptually interesting.
June 21, 2013 at 5:33 pm #139820Kitty Giraudel
ParticipantTheoretically… I haven’t played with it at all, and I’m not even sure what the support is.
The same as animation if no mistake.
June 21, 2013 at 5:34 pm #139821Paulie_D
MemberThread is 2 years old….just saying.
June 21, 2013 at 5:43 pm #139824Kitty Giraudel
ParticipantDamn, I always forget to check dates..
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.