“Shake” CSS Keyframe Animation

This assumes the use of an autoprefixer.

.face:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

See the Pen "Shake" CSS snippet for CSS-Tricks by Sarah Drasner (@sdras) on CodePen.

Comments

  1. User Avatar
    fardin
    Permalink to comment#

    hello

  2. User Avatar
    Farzad YZ
    Permalink to comment#

    Actually knowing the symmetry of movement helps a lot in understanding the basics of this animation. How did you actually came through the best cubic bezier for the timing function?

  3. User Avatar
    Sarah Drasner
    Permalink to comment#

    Hi Farzad! Glad it’s useful. I got the cubic bezier through trial and error, but I experimented a lot using Lea Verou’s tool, http://cubic-bezier.com/

    • User Avatar
      Farzad YZ
      Permalink to comment#

      Well thanks for the fast reply

    • User Avatar
      talha kaan özkan
      Permalink to comment#

      merhaba

    • User Avatar
      Sandro Alves Peres
      Permalink to comment#

      Nice effect, very useful ^_^

    • User Avatar
      2srenu
      Permalink to comment#

      .face:hover {
      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      perspective: 1000px;
      }

      @keyframes shake {
      10%, 90% {
      transform: translate3d(-1px, 0, 0);
      }

      20%, 80% {
      transform: translate3d(2px, 0, 0);
      }

      30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
      }

      40%, 60% {
      transform: translate3d(4px, 0, 0);
      }
      }

  4. User Avatar
    monfared
    Permalink to comment#

    tiny and nice effect…tnx

  5. User Avatar
    Lionel
    Permalink to comment#

    Just in case could be useful, there is also CSShake with some customisations available.

  6. User Avatar
    Prad
    Permalink to comment#

    Does it work on svgs? I would like to use the animation for svg icons like on this one http://migrera.com

  7. User Avatar
    Prad
    Permalink to comment#

    seen it now..:) Thanks for the article Sarah.

  8. User Avatar
    mnbf

    sgdfg

  9. User Avatar
    Marco

    Amazing animation. One question though: how can i toggle this animation on/off ?

    Cuz im adding a class (“shake”) through Jquery, but when i remove it and add it again, or when i use the function toggleClass, the animation doesnt happen.

    Thanks

  10. User Avatar
    mike
    Permalink to comment#

    Thanks for the article. This is not working in IE 11. Any ideas on what would make it work? The image goes away when moving over and then when moving out it comes back with a slight animation, but need to image to not disappear.
    Thanks!

  11. User Avatar
    Merlin
    Permalink to comment#

    Why are perspective and backface-visibility used?

    I removed them in CodePen and there were no issues. Are they necessary for some browsers?

  12. User Avatar
    toby
    Permalink to comment#

    This is great thanks for posting.

    What do I alter to decrease the amount of shaking. I can adjust the time but nothing seems to decrease the horisontal travel, I just want it to be more subtle? Have tried all variables but can’t seem to change it.

    Thanks

  13. User Avatar
    ANDRES TRUJILLO
    Permalink to comment#

    Hi :)

    How can I get the shaking function vertically?

    Thanks

  14. User Avatar
    nitesh
    Permalink to comment#

    Nice tutorial

  15. User Avatar
    Hubert
    Permalink to comment#

    Hi,

    thanks for tutorial. I am facing a little issue as I have absolutely positioned icon inside of button verticaly centered. translate3D in shake keyframe causes to icon jump to bottom, then shake from side to side. How can I solve this issue? Thank you

    .quick_basket .button::after {position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
    .quick_basket .button:hover::after {animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, inherit, 0); backface-visibility: hidden; perspective: 1000px;}

  16. User Avatar
    Pranab
    Permalink to comment#

    if i use only translateX instead of translate3d and remove perspective..then it works fine..
    so, what’s the advantage here to use translate3d?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag