CODEWITHSUNDEEP
javascriptjquerycss
DevJoe
DevJoe

Reputation: 443

Run animation every 5 seconds/interval

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>

Upvotes: 8

Views: 9502

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 4

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

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>

Upvotes: 8

Related Questions