-
Wobble Effect by HTML 5 animation
almost 11 years ago
<!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 class='container'> <div class='slice1 slices'></div> <div class='slice2 slices'></div> <div class='slice3 slices'></div> <div class='slice4 slices'></div> <div class='slice5 slices'></div> <div class='slice6 slices'></div> <div class='slice7 slices'></div> <div class='slice8 slices'></div> <div class='slice9 slices'></div> <div class='slice10 slices'></div> <div class='slice11 slices'></div> <div class='slice12 slices'></div> <div class='slice13 slices'></div> <div class='slice14 slices'></div> <div class='slice15 slices'></div> <div class='slice16 slices'></div> <div class='slice17 slices'></div> <div class='slice18 slices'></div> <div class='slice19 slices'></div> <div class='slice20 slices'></div> <div class='slice21 slices'></div> <div class='slice22 slices'></div> <div class='slice23 slices'></div> <div class='slice24 slices'></div> </div> </body> </html>PREVIEW of this effect:-
0 Comment(s)