shake-and-color-change.js

const xMax = 16;
const shake = anime({
  targets: '#js-login-form',
  easing: 'easeInOutSine',
  duration: 550,
  translateX: [
    {
      value: xMax * -1,
    },
    {
      value: xMax,
    },
    {
      value: xMax/-2,
    },
    {
      value: xMax/2,
    },
    {
      value: 0,
    }
  ],
  autoplay: false,
});
const colorAnims = [
  anime({
    targets: '#js-login-form',
    borderTopColor: '#f7733f',
    easing: 'linear',
    duration: 500,
    autoplay: false,
  }),
  anime({
    targets: '.form-group input',
    borderColor: '#f7733f',
    easing: 'linear',
    duration: 500,
    autoplay: false,
  }),
];
const send = () => {
  shake.restart();
  colorAnims.forEach(a => a.restart());
};