8

I would like to shake this text every 5 seconds, so I tried to implement an animation in CSS and set an interval via jQuery, but it seems something is wrong...and ideas what's missing? Here's a fiddle: https://jsfiddle.net/s909gu2s/1/

.shk {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-animation-name: shake;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
}

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

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

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

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

$(document).ready(function() {
    setInterval(function() {
        $(".shk").css("animation", "shakeMe");
    }, 500);
});

<div class="shk">Shake me</div>
1

2 Answers 2

8

You can do it with pure CSS, no JS/jQuery needed. In order to accomplish this, I set the animation-duration to 5 seconds, then multiplied all percentage values by 0.2 (because 1 second out of 5 seconds => 20%). Then translate back to 0px after the highest percentage value. And voilà, shaking every 5 seconds:

.shk {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    animation-name: shakeMe;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes shakeMe {
    2%, 18% {
        transform: translate3d(-5px, 0, 0);
    }

    4%, 16% {
        transform: translate3d(5px, 0, 0);
    }

    6%, 10%, 14% {
        transform: translate3d(-5px, 0, 0);
    }

    8%, 12% {
        transform: translate3d(5px, 0, 0);
    }
    
    18.1% {
        transform: translate3d(0px, 0, 0);
    }
}
<div class="shk">Shake me</div>

0
4

Working fiddle.

First of all you should adjust the name of animation shake in the CSS rules to matche the name right name shakeMe :

.shk {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-animation-name: shake;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
}

Then you could toggle the class inside the interval to reanimate the test every X ms :

$(document).ready(function() {
    setInterval(function() {
        $("#target").toggleClass('shk');
    }, 500);
});

Hope this helps.

$(document).ready(function() {
  setInterval(function() {
    $("#target").toggleClass('shk');
  }, 5000);
});
.shk {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-animation-name: shakeMe;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
}

@keyframes shakeMe {
  10%,
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(5px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-5px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(5px, 0, 0);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target" class="shk">Shake me</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.