Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Wobble Effect by HTML 5 animation

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.08k
    Comment on it
    <!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&#95;ee42f6589d&#95;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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: