Pendulum Waves
A CSS3 remake of the Pendulum Waves experiment by Harvard Natural Science.
(Source located under the demo)
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Pendulum Waves by Samer Ziadeh</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="pendulum-waves.css" />
</head>
<body>
<div id="wrapper">
<div id="waves">
<div id="center-line"> </div>
<div id="bob-1" class="bob"> </div>
<div id="bob-2" class="bob"> </div>
<div id="bob-3" class="bob"> </div>
<div id="bob-4" class="bob"> </div>
<div id="bob-5" class="bob"> </div>
<div id="bob-6" class="bob"> </div>
<div id="bob-7" class="bob"> </div>
<div id="bob-8" class="bob"> </div>
<div id="bob-9" class="bob"> </div>
<div id="bob-10" class="bob"> </div>
<div id="bob-11" class="bob"> </div>
<div id="bob-12" class="bob"> </div>
<div id="bob-13" class="bob"> </div>
<div id="bob-14" class="bob"> </div>
<div id="bob-15" class="bob"> </div>
</div>
</div>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
background: none repeat scroll 0 0 #fff;
}
#wrapper {
width: 300px;
margin: 20px auto;
}
#waves {
position: relative;
}
#center-line {
position: absolute;
top: 50px;
width: 300px;
height: 1px;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
}
.bob {
position: absolute;
top: 50px;
width: 10px;
height: 10px;
background: none repeat scroll 0 0 #39c;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 0 5px #333;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#bob-1 {
left: 0;
-moz-animation-duration: 1176ms;
-moz-animation-name: bob-1;
-webkit-animation-duration: 1176ms;
-webkit-animation-name: bob-1;
animation-duration: 1176ms;
animation-name: bob-1;
}
#bob-2 {
left: 20px;
-moz-animation-duration: 1153ms;
-moz-animation-name: bob-2;
-webkit-animation-duration: 1153ms;
-webkit-animation-name: bob-2;
animation-duration: 1153ms;
animation-name: bob-2;
}
#bob-3 {
left: 40px;
-moz-animation-duration: 1132ms;
-moz-animation-name: bob-3;
-webkit-animation-duration: 1132ms;
-webkit-animation-name: bob-3;
animation-duration: 1132ms;
animation-name: bob-3;
}
#bob-4 {
left: 60px;
-moz-animation-duration: 1111ms;
-moz-animation-name: bob-4;
-webkit-animation-duration: 1111ms;
-webkit-animation-name: bob-4;
animation-duration: 1111ms;
animation-name: bob-4;
}
#bob-5 {
left: 80px;
-moz-animation-duration: 1090ms;
-moz-animation-name: bob-6;
-webkit-animation-duration: 1090ms;
-webkit-animation-name: bob-6;
animation-duration: 1090ms;
animation-name: bob-6;
}
#bob-6 {
left: 100px;
-moz-animation-duration: 1071ms;
-moz-animation-name: bob-6;
-webkit-animation-duration: 1071ms;
-webkit-animation-name: bob-6;
animation-duration: 1071ms;
animation-name: bob-6;
}
#bob-7 {
left: 120px;
-moz-animation-duration: 1052ms;
-moz-animation-name: bob-7;
-webkit-animation-duration: 1052ms;
-webkit-animation-name: bob-7;
animation-duration: 1052ms;
animation-name: bob-7;
}
#bob-8 {
left: 140px;
-moz-animation-duration: 1034ms;
-moz-animation-name: bob-8;
-webkit-animation-duration: 1034ms;
-webkit-animation-name: bob-8;
animation-duration: 1034ms;
animation-name: bob-8;
}
#bob-9 {
left: 160px;
-moz-animation-duration: 1016ms;
-moz-animation-name: bob-9;
-webkit-animation-duration: 1016ms;
-webkit-animation-name: bob-9;
animation-duration: 1016ms;
animation-name: bob-9;
}
#bob-10 {
left: 180px;
-moz-animation-duration: 1000ms;
-moz-animation-name: bob-10;
-webkit-animation-duration: 1000ms;
-webkit-animation-name: bob-10;
animation-duration: 1000ms;
animation-name: bob-10;
}
#bob-11 {
left: 200px;
-moz-animation-duration: 983ms;
-moz-animation-name: bob-11;
-webkit-animation-duration: 983ms;
-webkit-animation-name: bob-11;
animation-duration: 983ms;
animation-name: bob-11;
}
#bob-12 {
left: 220px;
-moz-animation-duration: 967ms;
-moz-animation-name: bob-12;
-webkit-animation-duration: 967ms;
-webkit-animation-name: bob-12;
animation-duration: 967ms;
animation-name: bob-12;
}
#bob-13 {
left: 240px;
-moz-animation-duration: 952ms;
-moz-animation-name: bob-13;
-webkit-animation-duration: 952ms;
-webkit-animation-name: bob-13;
animation-duration: 952ms;
animation-name: bob-13;
}
#bob-14 {
left: 260px;
-moz-animation-duration: 937ms;
-moz-animation-name: bob-14;
-webkit-animation-duration: 937ms;
-webkit-animation-name: bob-14;
animation-duration: 937ms;
animation-name: bob-14;
}
#bob-15 {
left: 280px;
-moz-animation-duration: 923ms;
-moz-animation-name: bob-15;
-webkit-animation-duration: 923ms;
-webkit-animation-name: bob-15;
animation-duration: 923ms;
animation-name: bob-15;
}
/*
* Mozilla
*/
@-moz-keyframes bob-1 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-2 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-3 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-4 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-5 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-6 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-7 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-8 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-9 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-10 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-11 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-12 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-13 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-14 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-moz-keyframes bob-15 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
/*
* Webkit
*/
@-webkit-keyframes bob-1 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-2 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-3 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-4 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-5 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-6 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-7 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-8 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-9 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-10 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-11 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-12 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-13 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-14 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@-webkit-keyframes bob-15 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
/*
* Regular
*/
@keyframes bob-1 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-2 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-3 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-4 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-5 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-6 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-7 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-8 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-9 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-10 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-11 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-12 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-13 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-14 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
@keyframes bob-15 {
from { top: 70px; }
50% { top: 30px; }
to { top: 70px; }
}
