Wobble Effect by HTML 5 animation
<!DOCTYPE html>
<html>
<head>
<title>wobble effect</title>
<style>
body {
background-color: tomato;
}
.container {
position: absolute;
top: 40px;
left: 140px;
}
.slices {
position: absolute;
width: 600px;
height: 23px;
background: url
("http://farm3.staticflickr.com/2879/12096787325_ee42f6589d_z.jpg");
animation: wobble 5s infinite ease-in-out alternate;
}
.slice1 {
top: 15px;
background-position: 0 -15px;
animation-delay: 340ms;
}
.slice2 {
top: 30px;
background-position: 0 -30px;
animation-delay: 430ms;
}
.slice3 {
top: 45px;
background-position: 0 -45px;
animation-delay: 520ms;
}
.slice4 {
top: 60px;
background-position: 0 -60px;
animation-delay: 610ms;
}
.slice5 {
top: 75px;
background-position: 0 -75px;
animation-delay: 700ms;
}
.slice6 {
top: 90px;
background-position: 0 -90px;
animation-delay: 790ms;
}
.slice7 {
top: 105px;
background-position: 0 -105px;
animation-delay: 880ms;
}
.slice8 {
top: 120px;
background-position: 0 -120px;
animation-delay: 970ms;
}
.slice9 {
top: 135px;
background-position: 0 -135px;
animation-delay: 1060ms;
}
.slice10 {
top: 150px;
background-position: 0 -150px;
animation-delay: 1150ms;
}
.slice11 {
top: 165px;
background-position: 0 -165px;
animation-delay: 1240ms;
}
.slice12 {
top: 180px;
background-position: 0 -180px;
animation-delay: 1330ms;
}
.slice13 {
top: 195px;
background-position: 0 -195px;
animation-delay: 1420ms;
}
.slice14 {
top: 210px;
background-position: 0 -210px;
animation-delay: 1510ms;
}
.slice15 {
top: 225px;
background-position: 0 -225px;
animation-delay: 1600ms;
}
.slice16 {
top: 240px;
background-position: 0 -240px;
animation-delay: 1690ms;
}
.slice17 {
top: 255px;
background-position: 0 -255px;
animation-delay: 1780ms;
}
.slice18 {
top: 270px;
background-position: 0 -270px;
animation-delay: 1870ms;
}
.slice19 {
top: 285px;
background-position: 0 -285px;
animation-delay: 1960ms;
}
.slice20 {
top: 300px;
background-position: 0 -300px;
animation-delay: 2050ms;
}
.slice21 {
top: 315px;
background-position: 0 -315px;
animation-delay: 2140ms;
}
.slice22 {
top: 330px;
background-position: 0 -330px;
animation-delay: 2230ms;
}
.slice23 {
top: 345px;
background-position: 0 -345px;
animation-delay: 2320ms;
}
.slice24 {
top: 360px;
background-position: 0 -360px;
animation-delay: 2410ms;
}
@keyframes wobble {
25% {
transform: translateY(-8px);
}
50% {
transform: translateY(8px);
}
75% {
transform: translateY(-8px);
}
100% {
transform: translateY(8px);
}
}
</style>
</head>
<body>
<div 'container'>
<div 'slice1 slices'></div>
<div 'slice2 slices'></div>
<div 'slice3 slices'></div>
<div 'slice4 slices'></div>
<div 'slice5 slices'></div>
<div 'slice6 slices'></div>
<div 'slice7 slices'></div>
<div 'slice8 slices'></div>
<div 'slice9 slices'></div>
<div 'slice10 slices'></div>
<div 'slice11 slices'></div>
<div 'slice12 slices'></div>
<div 'slice13 slices'></div>
<div 'slice14 slices'></div>
<div 'slice15 slices'></div>
<div 'slice16 slices'></div>
<div 'slice17 slices'></div>
<div 'slice18 slices'></div>
<div 'slice19 slices'></div>
<div 'slice20 slices'></div>
<div 'slice21 slices'></div>
<div 'slice22 slices'></div>
<div 'slice23 slices'></div>
<div 'slice24 slices'></div>
</div>
</body>
</html>
For such more Blogs kindly visit to http://findnerd.com/NerdDigest/Html
<!DOCTYPE html>
<html>
<head>
<title>wobble effect</title>
<style>
body {
background-color: tomato;
}
.container {
position: absolute;
top: 40px;
left: 140px;
}
.slices {
position: absolute;
width: 600px;
height: 23px;
background: url
("http://farm3.staticflickr.com/2879/12096787325_ee42f6589d_z.jpg");
animation: wobble 5s infinite ease-in-out alternate;
}
.slice1 {
top: 15px;
background-position: 0 -15px;
animation-delay: 340ms;
}
.slice2 {
top: 30px;
background-position: 0 -30px;
animation-delay: 430ms;
}
.slice3 {
top: 45px;
background-position: 0 -45px;
animation-delay: 520ms;
}
.slice4 {
top: 60px;
background-position: 0 -60px;
animation-delay: 610ms;
}
.slice5 {
top: 75px;
background-position: 0 -75px;
animation-delay: 700ms;
}
.slice6 {
top: 90px;
background-position: 0 -90px;
animation-delay: 790ms;
}
.slice7 {
top: 105px;
background-position: 0 -105px;
animation-delay: 880ms;
}
.slice8 {
top: 120px;
background-position: 0 -120px;
animation-delay: 970ms;
}
.slice9 {
top: 135px;
background-position: 0 -135px;
animation-delay: 1060ms;
}
.slice10 {
top: 150px;
background-position: 0 -150px;
animation-delay: 1150ms;
}
.slice11 {
top: 165px;
background-position: 0 -165px;
animation-delay: 1240ms;
}
.slice12 {
top: 180px;
background-position: 0 -180px;
animation-delay: 1330ms;
}
.slice13 {
top: 195px;
background-position: 0 -195px;
animation-delay: 1420ms;
}
.slice14 {
top: 210px;
background-position: 0 -210px;
animation-delay: 1510ms;
}
.slice15 {
top: 225px;
background-position: 0 -225px;
animation-delay: 1600ms;
}
.slice16 {
top: 240px;
background-position: 0 -240px;
animation-delay: 1690ms;
}
.slice17 {
top: 255px;
background-position: 0 -255px;
animation-delay: 1780ms;
}
.slice18 {
top: 270px;
background-position: 0 -270px;
animation-delay: 1870ms;
}
.slice19 {
top: 285px;
background-position: 0 -285px;
animation-delay: 1960ms;
}
.slice20 {
top: 300px;
background-position: 0 -300px;
animation-delay: 2050ms;
}
.slice21 {
top: 315px;
background-position: 0 -315px;
animation-delay: 2140ms;
}
.slice22 {
top: 330px;
background-position: 0 -330px;
animation-delay: 2230ms;
}
.slice23 {
top: 345px;
background-position: 0 -345px;
animation-delay: 2320ms;
}
.slice24 {
top: 360px;
background-position: 0 -360px;
animation-delay: 2410ms;
}
@keyframes wobble {
25% {
transform: translateY(-8px);
}
50% {
transform: translateY(8px);
}
75% {
transform: translateY(-8px);
}
100% {
transform: translateY(8px);
}
}
</style>
</head>
<body>
<div 'container'>
<div 'slice1 slices'></div>
<div 'slice2 slices'></div>
<div 'slice3 slices'></div>
<div 'slice4 slices'></div>
<div 'slice5 slices'></div>
<div 'slice6 slices'></div>
<div 'slice7 slices'></div>
<div 'slice8 slices'></div>
<div 'slice9 slices'></div>
<div 'slice10 slices'></div>
<div 'slice11 slices'></div>
<div 'slice12 slices'></div>
<div 'slice13 slices'></div>
<div 'slice14 slices'></div>
<div 'slice15 slices'></div>
<div 'slice16 slices'></div>
<div 'slice17 slices'></div>
<div 'slice18 slices'></div>
<div 'slice19 slices'></div>
<div 'slice20 slices'></div>
<div 'slice21 slices'></div>
<div 'slice22 slices'></div>
<div 'slice23 slices'></div>
<div 'slice24 slices'></div>
</div>
</body>
</html>
For such more Blogs kindly visit to http://findnerd.com/NerdDigest/Html