3 replies [Last post]
prismspecs
prismspecs's picture
Offline
Regular
Last seen: 8 years 8 weeks ago
Timezone: GMT-4
Joined: 2010-10-31
Posts: 18
Points: 23

hey there! i was checking out the new webkit examples and they seem cool. i can't figure out how to play with animation timing, stopping, and starting though. any ideas? like here, i'd like to be able to stop the shape from spinning on mouseover/hover:
http://webkit.org/blog-files/3d-transforms/morphing-cubes.html

all the code is self-contained if you need to view source

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 17 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Add this to the

Add this to the stylesheet:

#shape:hover {
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
  }
Only the webkit engines support this now, but the -,moz-, -o-, and the general property names future proof the rule-set.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

prismspecs
prismspecs's picture
Offline
Regular
Last seen: 8 years 8 weeks ago
Timezone: GMT-4
Joined: 2010-10-31
Posts: 18
Points: 23

thanks so much! it doesn't

thanks so much! it doesn't stop the animation as much as it resets it and stops it, thought. any idea on how to maintain the current rotation?

shawnchin
shawnchin's picture
Offline
newbie
USA
Last seen: 9 years 4 weeks ago
USA
Timezone: GMT+5
Joined: 2010-11-04
Posts: 1
Points: 1

Hy all. I am shawn from

Hy all. I am shawn from southfield and new here. I glad to join this forum community.
regards...