Shark animation machine: go!

May 18, 2012 1:35 PM

I want to make a lightweight, non-Flash animation for my webpage that looks like this one example...

the animation on http://themble.com/bones/ (wait five seconds--see the shark!)

1. What is the animation built with? (viewing the page source shows a shark .png, but I can't tell what if any script is acting on it)
2. Can you recommend any good tutorials for building something similar?

I have the impression that this is a lightweight, non-Flash (maybe HTML5/JS-based?) animation, but have no idea how to experiment with something similar. Thanks!

posted by pavane to computers & internet (3 answers total)

Looks like the animation is done in CSS.

http://themble.com/wp-content/themes/themblev3/library/styles/css/animation.css
posted by wongcorgi at 1:38 PM on May 18, 2012

Here's the shark:

http://themble.com/wp-content/themes/themblev3/library/images/bones/shark.png

Here's the CSS, I've bolded the

#shark {
	display: block;
	position: absolute;
	z-index: 8002;
	width: 350px;
	height: 167px;
	background: url(../../images/bones/shark.png) no-repeat;
	bottom: 0;
	left: 250px;
	-webkit-animation: shark-bob 9.2s infinite linear;
	-moz-animation: shark-bob 9.2s infinite linear;
	-ms-animation: shark-bob 9.2s infinite linear;
	-o-animation: shark-bob 9.2s infinite linear;
	animation: shark-bob 9.2s infinite linear;
}

The definition for the shark-bob keyframes is in here:
http://themble.com/wp-content/themes/themblev3/library/styles/css/animation.css:

/* shark bob */
@-webkit-keyframes shark-bob {
    0% {
     left: 250px;
     -webkit-transform: rotate(1deg);
     bottom: -150px;
     display: none;
     z-index: -1;
   }
   7% {
   	bottom: -95px;
   	display: block;
   	z-index: 8002;
   }
   
   60% {
      left: 575px;
      -webkit-transform: rotate(-10deg);
      bottom: -20px;
   } 
   70% {
     left: 700px;
     -webkit-transform: rotate(-13deg);
   }
   73% {
   	 -webkit-transform: rotate(-16deg);
   	 bottom: -10px;
  	}
   75% {
   	bottom: -5px;
   	left: 850px;
   	-webkit-transform: rotate(-13deg);
   }
   78% {
   	bottom: 5px;
   	left: 850px;
   	-webkit-transform: rotate(-8deg);
   }
   81% {
   	bottom: -10px;
   	left: 850px;
   	-webkit-transform: rotate(-5deg);
   }
   90% {
   	bottom: -60px;
   	left: 900px;
   	-webkit-transform: rotate(0deg);
   }
   95% {
   	bottom: -80px;
   	left: 1000px;
   	display: block;
   	z-index: 8002;
   }
   99% {
   	bottom: -100px;
   	left: 1000px;
   	display: none;
   	z-index: -1;
   }
}

In terms of tooling, you might look at Sencha Animator - there are a bunch of tools out there that aim to do this, none are that great yet. The CSS is pretty readable here, which is cool. But as the animation.css file says:

Seriously, don't be a douchebag and copy this since it took me
a LONG time to perfect. You're free to check it out and even use
the code as inspiration on your own projects, but don't copy it
line by line. Cman...

Nice find!
posted by artlung at 3:16 PM on May 18, 2012 [2 favorites]

One tool that is actually quite good for creating these CSS animations, if you're on a Mac, is Hype.
posted by heliostatic at 11:08 PM on May 18, 2012